Iterate through JSON with JavaScript/jQuery

Question

I was hoping someone would be able to show me how to iterate through the provided JSON below with JavaScript/jQuery so that I can add a new <li> per message using jQuery

[
{
"id":2,
"chat_id":"wrz",
"sender":"Brandon",
"receiver":"Elliott",
"message":"This is a second test message.",
"created_at":"2015-09-21 00:00:00",
"updated_at":"2015-09-21 00:00:00",
"time_stamp":"2015-09-21 06:33:58"
},
{
"id":4,
"chat_id":"wrz",
"sender":"Elliot",
"receiver":"Brandon",
"message":"This is a third test message.",
"created_at":"2015-09-21 00:00:00",
"updated_at":"2015-09-21 00:00:00",
"time_stamp":"2015-09-21 06:33:58"
},
{
"id":5,
"chat_id":"wrz",
"sender":"Brandon",
"receiver":"Elliott",
"message":"This is a fourth test message.",
"created_at":"2015-09-21 00:00:00",
"updated_at":"2015-09-21 00:00:00",
"time_stamp":"2015-09-21 06:33:58"
}
]

possible duplicate of [How do I iterate through this JSON object in jQuery?](http://stackoverflow.com/questions/9887009/how-do-i-iterate-through-this-json-object-in-jquery) — Shawn Mehan, Sep 23 '15 at 18:25
There are lots of tutorials for doing this and other posts on this site. Just saying *here's my data* is too broad a question when no attempt was made to solve this yourself — charlietfl, Sep 23 '15 at 18:44

score 2 · Accepted Answer · answered Sep 23 '15 at 18:26

HTML

 <ul id="containsMessages">
</ul>

Javascript

var json = 
[
{
"id":2,
"chat_id":"wrz",
"sender":"Brandon",
"receiver":"Elliott",
"message":"This is a second test message.",
"created_at":"2015-09-21 00:00:00",
"updated_at":"2015-09-21 00:00:00",
"time_stamp":"2015-09-21 06:33:58"
},
{
"id":4,
"chat_id":"wrz",
"sender":"Elliot",
"receiver":"Brandon",
"message":"This is a third test message.",
"created_at":"2015-09-21 00:00:00",
"updated_at":"2015-09-21 00:00:00",
"time_stamp":"2015-09-21 06:33:58"
},
{
"id":5,
"chat_id":"wrz",
"sender":"Brandon",
"receiver":"Elliott",
"message":"This is a fourth test message.",
"created_at":"2015-09-21 00:00:00",
"updated_at":"2015-09-21 00:00:00",
"time_stamp":"2015-09-21 06:33:58"
}
];

$.each(json,function(index,item)
{
     $("#containsMessages").append("<li>"+item.message+"</li>");
});

score 0 · Answer 2 · answered Sep 23 '15 at 18:25

0

Suppose that json is stored in a variable, you could do as follows (rough example the rest is up to you :)):

var json = []; //Your json.
var $ul = $("#yourUl");
for (var i = 0; i < json.length; i++) {
    $ul.append($("<li />", {html: json[i].message}));
}

answered Sep 23 '15 at 18:25

taxicala

21,408
7
37
66

It's better to cache the length before the loop. Like var length=json.length and then using this var for loop. – Maciej Krawczyk Sep 23 '15 at 18:27

turbopipp · Answer 3 · 2022-10-11T16:04:41.107

Here are one possible solution with parseJSON()

var inputJSON = '[{"id":2,"chat_id":"wrz","sender":"Brandon","receiver":"Elliott","message":"This is a second test message.","created_at":"2015-09-21 00:00:00","updated_at":"2015-09-21 00:00:00","time_stamp":"2015-09-21 06:33:58"},{"id":3,"chat_id":"wrz","sender":"Brandon","receiver":"Elliott","message":"This is a third test message.","created_at":"2015-09-21 00:00:00","updated_at":"2015-09-21 00:00:00","time_stamp":"2015-09-21 06:33:58"}]';

var javascriptObject = jQuery.parseJSON(inputJSON);
var list = javascriptObject.map( function(json) { return '<li>'+json.message+'</li>'; } );
$('#list').append(list);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list"></div>

Iterate through JSON with JavaScript/jQuery

3 Answers3