Mustache.js loop through JSON data

Question

Can anyone advise how should my template loop like to loop through JSON data in following example?
DEMO here: http://jsfiddle.net/Seefeld/LbVEH/

 {
    "0": {
        "Dosage": "25",
        "Drug": "Indocin",
        "Patient": "David",
        "Date": "15/11/2012 14:29:14"
    },
    "1": {
        "Dosage": "50",
        "Drug": "Enebrel",
        "Patient": "Sam",
        "Date": "15/11/2012 14:29:14"
    },
    "2": {
        "Dosage": "10",
        "Drug": "Hydralazine",
        "Patient": "Christoff",
        "Date": "15/11/2012 14:29:14"
    },
    "3": {
        "Dosage": "21",
        "Drug": "Combivent",
        "Patient": "Janet",
        "Date": "15/11/2012 14:29:14"
    },
    "4": {
        "Dosage": "100",
        "Drug": "Dilantin",
        "Patient": "Melanie",
        "Date": "15/11/2012 14:29:14"
    }
}

All examples I have seen on mustache.js assumed that you know the object name. Any suggestion much appreciated.

I suppose that you can't change the format of the JSON data? — Julien Royer
– Julien Royer, Commented Nov 15, 2012 at 14:56
I can on JS site, not the server side. What would you suggest? — Iladarsda
– Iladarsda, Commented Nov 15, 2012 at 14:58

Julien Royer · Accepted Answer · 2012-11-15 15:12:58Z

8

You can either transform data into a genuine array (which it should be anyway):

var drugs = [];
for (var i = 0, drug; (drug = data[i]); ++i) {
  drugs.push(drug);
}

var template = "{{#drugs}}<p>{{Drug}}</p>{{/drugs}}";
var html = Mustache.to_html(template, {drugs: drugs});
$(html).appendTo("#cnt");

or browse the data yourself:

var template = "<p>{{Drug}}</p>";
for (var i = 0, drug; (drug = data[i]); ++i) {
  var html = Mustache.to_html(template, drug);
  $(html).appendTo("#cnt");
}

edited Nov 15, 2012 at 15:12

answered Nov 15, 2012 at 15:05

Julien Royer

1,4291 gold badge14 silver badges28 bronze badges

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

5 Comments

Iladarsda Over a year ago

- this approche works perfectly. Can you suggest a way on transforming the data to real array on client site?

Iladarsda Over a year ago

Many thanks! Slightly off topic, what is the purpose of 2nd parameter in for loop?

Julien Royer Over a year ago

It it just a fancy way to write for (var i = 0; data[i]; ++i) { var drug = data[i]; …

Nuri YILMAZ Over a year ago

@JulienRoyer its look like briliant solution but how about {{> next_more}} inside of collection template what is defined on gtihup pages github.com/janl/mustache.js

Julien Royer Over a year ago

@NuriYILMAZ don’t hesitate to create a new answer, mine is probably obsolete and I don’t know much about Mustache. :-)

Collectives™ on Stack Overflow

Mustache.js loop through JSON data

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related