CODEWITHSUNDEEP
jsonmustache
thv20
thv20

Reputation: 978

Using mustache.js with numbered arrays

My JSON data source looks like this:

{"1":{
    "name":"One",
    "color":"red"
},
{"2":{
    "name":"Two",
    "color":"green"
}

I'm trying to loop through these records using mustache.js.

var model = [{"1":{"name":"One","color":"red"},{"2":{"name":"Two","color":"green"}];
var template = '<ul> {{#.}} <li>{{name}} -- {{color}} </li> {{/.}} </ul>';
var html = Mustache.to_html(template, model);
console.log(html);

But I can't figure out how to access the Name and Color. Any ideas?

Upvotes: 3

Views: 896

Answers (3)

Zero Distraction
Zero Distraction

Reputation: 1356

It would be simpler if you had your object array like this and use a simple {{#.}} <li>{{name}} -- {{color}} </li> {{/.}} loop:

var myCars = 
[
{"index":1,"name":"One", "color":"red" }},
{"index":2,"name":"Two", "color":"green" }}
];

Another approach is to build an iterator to unwrap each item:

Example here: http://jsfiddle.net/9qMqW/2/

var myCars = 
[
{"1":{ "name":"One", "color":"red" }},
{"2":{ "name":"Two", "color":"green" }}
];

// decorate the array with the iterator function
myCars.getNextCar = function(){ 
    !myCars.i ? myCars.i=1 : ++myCars.i;
    return(myCars[myCars.i-1][myCars.i])
};

var template = $("#carsTemplate").html();

$("#carsContainer").html(Mustache.render(template,{cars:myCars}));

And your HTML would be:

<div id="carsContainer">
    
</div>

<script id="carsTemplate" type="text/plain">
    <ul> 
        {{#cars}} 
            {{#cars.getNextCar}}
            <li>{{name}} -- {{color}}</li>
            {{/cars.getNextCar}}
        {{/cars}}
    </ul>
</script>

Note that the method getNextCar it will create an iterator in your object so you have to get a fresh one if you're using more than once. Or just change the array contents as other posters suggested.

On a side note, you might want to have a look at http://handlebarsjs.com/ which is a bit more robust with a more flexible syntax.

Upvotes: 1

Franco Rondini
Franco Rondini

Reputation: 11011

var model = [ 
             {"1":{"name":"One","color":"red"}},
             {"2":{"name":"Two","color":"green"}}
            ];
var model4view = {dots:
    model.map(function(obj){
        var v; for (k in obj) {v = obj[k];}; return v; })};

template = "'<ul> {{#dots}} <li>{{name}} -- {{color}} </li> {{/dots}} </ul>'";
var html = Mustache.to_html(template, model4view);

AFAIK , with reference to the mustache manual page Sections are the type of tags that allow to render blocks of text one or more times, but The behavior of the section is determined by the value of the key. so we need a key and a value that is the list. Therefore the array have to be the value of the key.

In the above code I leverage Array.prototype.map() to get a model4view which has a key with an arbitrary name: dots ( so we can use this name in mustache section tag {{#dots}} and a value that consist of the object value of the original numberd array item value. For example:

{"dots":[
         {"name":"One","color":"red"},
         {"name":"Two","color":"green"}
        ]}

[EDIT] If you need to output also the numer associated with each item you can use a map function: 

function(v){
    for (var property in v) { 
      o = v[property];
      o['id'] = property;
      return(o); 
  }});

this way the number can be used in the template as {{id}}.

Here is my fiddle where you can try and play around the solution.

Upvotes: 1

d4kris
d4kris

Reputation: 538

Here is the simplest possible solution, if you know the keys in your model always look like 1,2,3,...:

var model = [{"1":{"name":"One","color":"red"}},{"2":{"name":"Two","color":"green"}}];
var i, len = model.length;
for (i=0; i<len; i++) {
  model[i] = model[i][i+1];
}

Note that you're missing the ending curlies on your model.

Upvotes: 0

Related Questions