Bind dynamic object value inside multiple lists to HTML by filtering on key

Question

I'm getting a list of sandwich components from the server I'm working with, and they come back like below.

Our sandwich shop has various rules as to what parts can go with what, so most of the content is dynamic.

I have this sort of json (the bread object isn't guaranteed to have id = 1, not be the element at components[0]):

groups:[{
    id:1,
    name:"Regular Sandwich components",
    components:[
                {
                  id:1,
                  name:"Bread",
                  inputtype:"list",
                  options: [
                      {id:0,name:"Hearty Italian"},
                      {id:1,name:"Ciabatta"}
                  ],
                  .....
                }
    }]

I map this to dynamic form, and create a sandwich object out of it that stores the details in a flat JSON like so:

sandwich:{
    bread:0,
    .....
    }

I want to be able to summarise the choices in a side bar. My initial stab at this was to do:

<div class="sandwich-component bread">{{sandwich.bread}}</div>

But that only displays the id of the bread item, not very useful!

My second stab was this:

<div class="sandwich-component bread">{{groups[0].components[?].options[sandwich.bread]}}</div>

This feels like a better go, but I don't know how to 'find' this component. I've seen this but I'm struggling to figure out how to alter that code to work in my example.

What am I missing to implement this?

Answer 1

I managed to solve this with a filter and underscore.js:

app.filter('componentName', function(){
    return function(option, name, components){
        if(option === undefined||option === null){
            return ''
        }
        for (var i = 0; i<components.length;i++) {
            return _.findwhere(components[i].fields,{name:name}).options[option].name
        };
    };
});

and I use the interpolation like so {{sandwich.bread|componentName:'bread':components}}.

Hope that can help someone else!