Insert Object data in HTML

Question

How can I list the structured contents of a Javascript Object in HTML?

My object looks like this:

var lists = {
"Cars":{"Ford":false,"Ferarri":false},
"Names":{"John":true,"Harry":false},
"Homework":{"Maths":true,"Science":false,"History":true,"English":true}
}

What would the loop look like to print the keys as headers, and the property + values as an ordered list underneath?

Example:

Cars

Ford = False
Ferrari = False

Names

John = True
Harry = False

Homework

Maths = True
Science = False
History = True
English = True

I understand that I can append the object by name to HTML, but if the object is dynamic, and the key isn't known, how can I make a loop to do so?

@Quentin: This question isn't only about looping through an object, it's also about appending elements to HTML — Cerbrus, Oct 31 '14 at 13:45
@Cerbrus — The last paragraph of the question says that the appending to HTML part is already sorted. If that isn't what the OP intended to say, then the question is too broad anyway. — Quentin, Oct 31 '14 at 13:46
@tymeJV: Don't abuse your JS gold badge just because you want to answer a question -.- — Cerbrus, Oct 31 '14 at 14:02
@Cerbrus -- Well I did re-open it based on your initial comment, suppose I should've read more :\ — tymeJV, Oct 31 '14 at 14:07

score 4 · Accepted Answer · answered Oct 31 '14 at 13:47

4

Just got to loop, create the HTML string, and append! Say you have a container:

<div id="container"></div>

And your JS

var htmlString = "";
for (var key in lists) {
    htmlString += "<span>" + key + "</span>";
    htmlString += "<ul>";
    for (var item in lists[key]) {
        htmlString += "<li>" + item + " = " + lists[key][item] + "</li>";
    }
    htmlString += "</ul>";
}

document.getElementById("container").innerHTML = htmlString;

Working demo: http://jsfiddle.net/owqt5obp/

answered Oct 31 '14 at 13:47

tymeJV

103,943
14
161
157

It works for the example, so +1, to be safe however, the value should be escaped. – Maurice Perry Oct 31 '14 at 13:50
@MauricePerry -- What do ya mean? – tymeJV Oct 31 '14 at 13:51
Thanks @tymeJV didn't think about a loop inside a loop! – CodeSlow Oct 31 '14 at 13:55
1

@tymeJV: the strings could contain special characters such as < or &, in which case you would produce invalid HTML. It's not the case in this particular example though. – Maurice Perry Oct 31 '14 at 14:23
@tymeJV is it possible to use ".append" in this scenario? – CodeSlow Oct 31 '14 at 15:21

Insert Object data in HTML

1 Answers1