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?

AncientSwordRage · Accepted Answer · 2015-05-29 16:24:03Z

0

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!

edited May 29, 2015 at 16:24

answered May 29, 2015 at 15:49

AncientSwordRage

7,28321 gold badges100 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related