Jquery map array into template

Question

Ex: Attached Fiddle: http://jsfiddle.net/UNsDK/26/

I have an object called Cards filled with objects containing arrays.I do not know what the index title will be since the object could be different for any user:

 var obj = {'Cards':  {"Pack1":[{"name":"John","color":"red"}],
                       "Pack2":[{"name":"Smith","color":"green"}]}};

In this array Pack1, and Pack2 could have different names, but the inner content is consistent.

Therefore I cannot creature a template like below:

{{#Cards}}
{{#Pack1}}{{name}} {{color}} {{/Pack1}}
{{#Pack2}}{{name}} {{color}} {{/Pack2}}
..
{{/Cards}}

So i'm attempting to do it a different way by mapping the data into a array and and sending that to the template but it's not working: also my view object is losing the indexes of my Cards object.

var len = $.map(obj.Cards, function(n, i) { return i; }).length;
console.log('Length of Cards object is ' + len);
var view = {};
view["Packs"] =$.map(obj.Cards, function(n, pack_name) { 
    console.log('this is:'+pack_name);
    for (var key in n) { 
        var obj = n[key];
        for (var prop in obj) {
            // important check that this is objects own property 
            // not from prototype prop inherited
            if(obj.hasOwnProperty(prop)) {
                console.log(prop + " = " + obj[prop]);
                return prop = obj[prop];
            }
        }
    }           
}); //end map

var template = '<ul> {{#Packs}} <li>{{id}} : {{name}} -- {{color}} </li> {{/Packs}} </ul>';
var html = Mustache.to_html(template, view);
var json = JSON.stringify(view); 
$('#sampleArea').html(html);

Vadim · Accepted Answer · 2014-02-24 07:06:37Z

1

You can convert your obj.Cards from map to array of objects containing id and data which was recently obj.Cards[id]. That will allow you to use nested repeaters. In this case your code may be something like that:

JavaScript

function convert(obj) {
  var data = [],
      item,
      id,
      card,
      i;
  for(id in obj.Cards) {
    if(obj.Cards.hasOwnProperty(id)) {
      card = obj.Cards[id];
      item = {
        id: id,
        data: []
      };
      for(i=0; i<card.length; i++) {
        item.data.push( $.extend({},card[i]) );
      }
      data.push(item);
    }
  }
  return {Cards: data};
}

var obj = {
  "Cards":{
    "Pack1":[{
      "name":"John",
      "color":"red"
    }, {
      "name":"Doe",
      "color":"blue"
    }],
    "Pack2":[{
      "name":"Smith",
      "color":"green"
    }]
  }
};

var template = '{{#Cards}}' +
                 '<div>{{id}}</div>' +
                 '<ul>' +
                   '{{#data}}<li>{{name}}: {{color}}</li>{{/data}}' +
                 '</ul>' +
               '{{/Cards}}';

var model = convert(obj);

$('body').append(Mustache.render(template, model));

JSBin: http://jsbin.com/zujiqoyi/1/edit

answered Feb 24, 2014 at 7:06

Vadim

8,7744 gold badges47 silver badges52 bronze badges

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

2 Comments

Undermine2k Over a year ago

hi this is great could you explain what : item.data.push( $.extend({},card[i]) ); the $.extend function is doing?

Vadim Over a year ago

@Undermine2k $.extend() clones the object card[i] and extends empty object with it. In case you use card[i] directly your converted object will use references of card[i] - all changes to obj.Cards will be reflected in converted object and vice versa. I just wanted to avoid such case and create totally new model in order to avoid unexpected results.

Collectives™ on Stack Overflow

Jquery map array into template

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related