Output JSON in javascript as a list without jquery

Question

I have a JSON object:

var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe","time":"9:15am","email":"[email protected]" },' +
'{"firstName":"Anna","lastName":"Smith","time":"9:15am","email":"[email protected]" },' +
'{"firstName":"Peter","lastName":"Jones" ,"time":"9:15am","email":"[email protected]"}]}';

That I want to print as a list in between div statements:

John Doe
9:15am
[email protected]
Anna Smith
9:15am
[email protected]
Peter Jones
9:15am
[email protected]

The HTML that I'm trying to populate looks like this:

    <div class="info">
        <ul>
            <li id="name"></li>
            <li id="time"></li>
            <li id="email"></li>
        </ul>
    </div>

How do I accomplish this?

<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<div id="output">

</div> 
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe","time":"9:15am","email":"[email protected]" },' +
'{"firstName":"Anna","lastName":"Smith","time":"9:15am","email":"[email protected]" },' +
'{"firstName":"Peter","lastName":"Jones" ,"time":"9:15am","email":"[email protected]"}]}';

var employees=JSON.parse(txt).employees;
var container=document.getElementById("output");

for (i=0;i<employees.length;i++) { //Loops for the length of the list
    var info=document.createElement('div');
    info.className='info'; //Creates a new <div> element and adds the class info to it

    var ul=document.createElement('div'); //Creates <ul> element
    info.appendChild(ul); //Adds the <ul> to the newly created <div>

    var name=document.createElement('li');
    name.className='name'; //Should use class, not id, as ID must be unique
    name.innerHTML=employees[i].firstName+' '+employees[i].lastName; //Adds name
    ul.appendChild(name);

    var time=document.createElement('li');
    time.className='time';
    time.innerHTML=employees[i].time;
    ul.appendChild(time);

    var email=document.createElement('li');
    email.className='email';
    email.innerHTML=employees[i].email;
    ul.appendChild(email);

    container.appendChild(info); //Adds the final generated HTML to the page

} //Will repeat for each item in list.

</script>
</body>
</html>

Are you using jQuery? (Makes things easier, but is not absolutely necessary.) — Brad
– Brad, Commented Sep 4, 2012 at 14:25
If you are planning on having multiple "info" groupings, you shouldn't use id's for name/time/email. — Shmiddty
– Shmiddty, Commented Sep 4, 2012 at 14:27
You should use class and not id to identify name, time and email as you will end up with multiple instances of them. — Jasper de Vries
– Jasper de Vries, Commented Sep 4, 2012 at 14:29

Death · Accepted Answer · 2012-09-05 02:22:53Z

1

First off, turn your string into an object:

var employees=JSON.parse(txt).employees;

Then, set up a loop to construct the HTML

var container=//Link to the containing element using getElementById or similar

for (i=0;i<employees.length;i++) { //Loops for the length of the list
    var info=document.createElement('div');
    info.className='info'; //Creates a new <div> element and adds the class info to it

    var ul=document.createElement('div'); //Creates <ul> element
    info.appendChild(ul); //Adds the <ul> to the newly created <div>

    var name1=document.createElement('li'); //Chrome seems not to like the variable "name" in this instance
    name1.className='name'; //Should use class, not id, as ID must be unique
    name1.innerHTML=employees[i].firstName+' '+employees[i].lastName; //Adds name
    ul.appendChild(name1);

    var time=document.createElement('li');
    time.className='time';
    time.innerHTML=employees[i].time;
    ul.appendChild(time);

    var email=document.createElement('li');
    email.className='email';
    email.innerHTML=employees[i].email;
    ul.appendChild(email);

    container.appendChild(info); //Displays the elements on the page

} //Will repeat for each item in list.

This could also be achieved using container.innerHTML, but constructing elements like that can confuse the DOM, so is usually only recommended for text nodes, though again ideally you'd use document.createTextNode().

edited Sep 5, 2012 at 2:22

answered Sep 4, 2012 at 14:36

Death

2,01713 silver badges14 bronze badges

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

5 Comments

Mike Over a year ago

this seems to work on jsfiddle, but not my local machine, is there any sort of library or API i need to download?

Death Over a year ago

The JSON object is built into Javascript, so you don't need to worry about any libraries for that. As for the rest, it's equally standards Javascript, so really it depends how you're implementing it. Note that running this straight off won't work, as the object you've referenced as container likely doesn't exist in the DOM yet; you'll have to wait for pageload to be complete at least.

Mike Over a year ago

in the original question is my test.html program, can you see if i am missing something? i cant seem to get it to work.

Death Over a year ago

I copied that, character-for-character, and loaded it as a .htm file; worked perfectly for me. What browser are you using?

Death Over a year ago

It appears to be the use of the variable name, name, which Chrome doesn't like; changing it to any other name works fine, such as name1. I've edited my post to reflect this.

Philipp · Accepted Answer · 2012-09-04 14:29:13Z

0

First you get the array in the JSON string by parsing it:

var employees = JSON.parse(txt).employees

Then you create the HTML elements like this

var element = document.createElement('div'); // creates an empty div

And then you put the HTML tree together with

someElement.append(otherElement); // makes otherElement a child of someElement

answered Sep 4, 2012 at 14:29

Philipp

70.1k10 gold badges121 silver badges159 bronze badges

Collectives™ on Stack Overflow

Output JSON in javascript as a list without jquery

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related