StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It would be much easier if you had your object array like this and use a simple <code>{{#.}} <li>{{name}} -- {{color}} </li> {{/.}}</code> loop:</p> <pre><code>var myCars = [ {"index":1,"name":"One", "color":"red" }}, {"index":2,"name":"Two", "color":"green" }} ]; </code></pre> <p>But let's hack it hard and this voodoo may help you if you don't want to change the array contents nor traverse it:</p> <p>Example here: <a href="http://jsfiddle.net/9qMqW/2/" rel="nofollow">http://jsfiddle.net/9qMqW/2/</a></p> <pre><code>var myCars = [ {"1":{ "name":"One", "color":"red" }}, {"2":{ "name":"Two", "color":"green" }} ]; // decorate the array with method supporting the exotic indexing 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})); </code></pre> <p>And your HTML would be:</p> <pre><code><div id="carsContainer"> </div> <script id="carsTemplate" type="text/plain"> <ul> {{#cars}} {{#cars.getNextCar}} <li>{{name}} -- {{color}}</li> {{/cars.getNextCar}} {{/cars}} </ul> </script> </code></pre> <p>Note that the method <code>getNextCar</code> 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.</p> <p>On a side note, you might want to have a look at <a href="http://handlebarsjs.com/" rel="nofollow">http://handlebarsjs.com/</a> which is a bit more robust with a more flexible syntax.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload