From json to ul li

Question

I'm trying to parse json to ul li. here's my json:

var data = {"resultDescription":"SUCCESS","data":[{"orderNum":"A000","userName":"Oswaldo","value":504.74,"qty":3.0},{"orderNum":"A001","userName":"Mao","value":529.17,"qty":6.0},{"orderNum":"A002","userName":"Angeline","value":553.6,"qty":9.0},{"orderNum":"A003","userName":"Gerardo","value":578.03,"qty":12.0},{"orderNum":"A004","userName":"Nicki","value":602.46,"qty":15.0}]}

and I'm trying to parse it with that code:

$.each(data.data, function (index, item) {
                html += "<ul>";
                console.log(item);
                $.each(item.data, function (index1, item1) {
                    html += "<li>" + orderNum + "</li>";
                    html += "<li>" + qty + "</li>";
                    html += "<li>" + userName + "</li>";
                    html += "<li>" + value + "</li>";
                });
                html += "</ul>";
            });

What am I doing wrong?

JSFIDDLE example is here

Answer 1

Why do you have an additional $.each

$.each(item.data, function (index1, item1) {

See the below. Demo :

 var data = {"resultDescription":"SUCCESS","data":[{"orderNum":"A000","userName":"Oswaldo","value":504.74,"qty":3.0},{"orderNum":"A001","userName":"Mao","value":529.17,"qty":6.0},{"orderNum":"A002","userName":"Angeline","value":553.6,"qty":9.0},{"orderNum":"A003","userName":"Gerardo","value":578.03,"qty":12.0},{"orderNum":"A004","userName":"Nicki","value":602.46,"qty":15.0}]} var html = ""; $.each(data.data, function (index, item) { html += "<ul>"; console.log(item); //$.each(item.data, function (index1, item1) { html += "<li>" + item.orderNum + "</li>"; html += "<li>" + item.qty + "</li>"; html += "<li>" + item.userName + "</li>"; html += "<li>" + item.value + "</li>"; //}); html += "</ul>"; }); setTimeout(function() { $(".container").append(html); }, 1500); 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"></div> 

http://jsfiddle.net/kishoresahas/2012qo9u/1/

Answer 2

var html = "";
$.each(data.data, function (index, item) {
    html += "<ul>";
    console.log(item);
    html += "<li>" + item.orderNum + "</li>";
    html += "<li>" + item.qty + "</li>";
    html += "<li>" + item.userName + "</li>";
    html += "<li>" + item.value + "</li>";
    html += "</ul>";
});
setTimeout(function () {
    $(".container").append(html);
}, 1500);

Try this

demo

You are already getting the data from data here $.each(data.data, function (index, item) { no need for another iterate.

Answer 3

Remove second $.each and the item in front like 'item.ordernum'. Check out this Fiddle :

Here is the updated code:

var html = "";
            $.each(data.data, function (index, item) {
                console.log(data.data)
                html += "<ul>";
                    html += "<li>" + item.orderNum + "</li>";
                    html += "<li>" + item.qty + "</li>";
                    html += "<li>" + item.userName + "</li>";
                    html += "<li>" + item.value + "</li>";
                html += "</ul>";
            });
            setTimeout(function() {
                $(".container").append(html);
            }, 1500);

The reason we are asking you to remove is because item.data contains nothing and you can apply $.each on arrays, Also the item is an Object so you can access it directly.

Answer 4

Above answers are correct. But you can use jquery to build the html elements, rather than creating it by string concatenation.

$.each(data.data, function (index, item) {
    var ul = $("<ul/>");
    var li = $("<li/>", { text: item.orderNum });
    ul.append(li);
    ul.append(li.clone().text(item.qty));
    ul.append(li.clone().text(item.userName));
    ul.append(li.clone().text(item.value));
    $(".container").append(ul);
});

Fiddle

Answer 5

I found 2 errors
1- $.each(item.data should be $.each(item the inner loop
2- inside inner loop orderNum should be item1.orderNum and same for other items below it as

        var html = "";
        $.each(data.data, function (index, item) {
            html += "<ul>";
            console.log(item);
            $.each(item, function (index1, item1) {
                html += "<li>" + item1.orderNum + "</li>";
                html += "<li>" + item1.qty + "</li>";
                html += "<li>" + item1.userName + "</li>";
                html += "<li>" + item1.value + "</li>";
            });
            html += "</ul>";
        });
        setTimeout(function() {
            $(".container").html(html);
        }, 1500);

http://jsfiddle.net/0sx1dob0/