Build DOM elements from JSON

Question

I've got a JSON string that takes this form...

{
    "people": [
        {
            "name": "person1",
            "description": "This is a brief description of my service.",
            "image": "mandg1.jpg",
            "type": "first",
            "insured": "yes",
            "license": "N\/A",
            "picture": "mandg1.jpg",
            "yearsinbusiness": "8",
            "distance": 15
        },
        {
            "name": "person2",
            "description": "This is a brief description of my service.",
            "image": "mandg2.jpg",
            "type": "second",
            "insured": "yes",
            "license": "N\/A",
            "picture": "mandg2.jpg",
            "yearsinbusiness": "8",
            "distance": 19
        }
    ]
}

What I'd like to do is, via jQuery, build a group of divs based upon the "people" key...so in the instance above...you'd end up creating 2 elements...and append them to the div id="container". If there were 50 elements, you'd end up with 50 divs, etc etc etc.

 <div id="container">
 <div id="person1">
 <p>Name: person1</p>
 <p>Description: This is a brief description of my service</p>
 </div>
 <div id="person2">  
 <p>Name: person2</p> 
 <p>Description: This is a brief description of my service</p>
 </div> 
 </div>

What would the jQuery syntax for that be? Thanks in advance!

Use a basic loop and build the elements yourself. Tip: Store the new DOM elements as HTML strings in a JavaScript array, `.join` them into a single string, and append them all to the page *at once* for greater efficiency. — Blazemonger, Aug 07 '15 at 14:39
You'd need to loop through the JSON and using keys and values make the elements. This isn't exactly what you want but look at this link https://github.com/Script47/Form.js I used JavaScript object array to build forms, I'm sure with a little bit of work you can adapt it to make it fit your purpose. — Script47, Aug 07 '15 at 14:39
@Blazemonger An alternative would be to use a document fragment, if you want to create real com objects in the first place. Sometimes that's the easier approach, when you want to add events, too. — Sirko, Aug 07 '15 at 14:42
@Sirko [Also good](http://stackoverflow.com/questions/14203196/does-using-a-document-fragment-really-improve-performance) -- jQuery doesn't really automate the process of working with document fragments, [but it's not that difficult, either](http://jsfiddle.net/hc5ED/6/). — Blazemonger, Aug 07 '15 at 14:44

Jacob T. Nielsen · Answer 1 · 2015-08-07T15:07:47.277

You can do the following with jQuery only. You wrote your json was "a string", but if already an object you can ofcourse omit the parseJSON part.

var json = '{"people...';
var data = jQuery.parseJSON(json);
var markupList = $.map(data.people, function (val, i) { return '<div id="' + val.name + '"><p>Name: ' + val.name + '</p><p>Description: ' + val.description + '</p></div>'; });
$(markupList).appendTo('#container');

score 0 · Accepted Answer · answered Aug 07 '15 at 14:52

What a great opportunity to learn to use the power of templates (in the below code example, I use the tim library available here: https://github.com/premasagar/tim) It simply maps an object's properties to {{propertyname}} in your template.

var tmpl = '<div id="person-{{name}}">\
 <p>Name: {{name}}</p>\
 <p>Description: {{description}}</p>\
 </div>';

var json = ... //your json object
var html = '';
$.each(json.people,function(i,person) { html += tim(tmpl,person); });
$('#someelement').html(html);

Build DOM elements from JSON

2 Answers2