jQuery Parsing JSON array to a table

Question

I was having this JSON structure

[
   {
      "id":"3",
      "0":"3",
      "name":"What ever",
      "1":"What ever",
      "email":"dd@dd.dd",
      "2":"dd@dd.dd",
      "mobile":"7777777",
      "3":"7777777",
      "address":"Bikrom Pur",
      "4":"Bikrom Pur"
   }   
]

Everything was working just fine when I parse these data though a table using the following jQuery function:

 function renderUserList(jsonData) {

    var table = '<table width="600" cellpadding="5" class="table table-hover table-bordered"><thead><tr><th scope="col">Name</th><th scope="col">Email</th><th scope="col">Mobile</th><th scope="col">Address</th><th scope="col"></th></tr></thead><tbody>';

    $.each( jsonData, function( index, posts){     
        table += '<tr>';
        table += '<td class="edit" field="name" user_id="'+posts.id+'">'+posts.name+'</td>';
        table += '<td class="edit" field="email" user_id="'+posts.id+'">'+posts.email+'</td>';
        table += '<td class="edit" field="mobile" user_id="'+posts.id+'">'+posts.mobile+'</td>';
        table += '<td class="edit" field="address" user_id="'+posts.id+'">'+posts.address+'</td>';
        table += '<td><a href="javascript:void(0);" user_id="'+posts.id+'" class="delete_confirm btn btn-danger"><i class="icon-remove icon-white"></i></a></td>';
        table += '</tr>';
    });

    table += '</tbody></table>';

    $('div#content').html(table);
}

I updated my server-side script to generate this JSON structure

{
   "success":1,
   "message":"Post Available!",
   "posts":[
      {
         "id":"39",
         "name":"Ahmed",
         "email":"sabsab58@gmail.com",
         "mobile":"778899",
         "address":"41122333"
      }
   ]
}

After I updated the JSON structure I could not parse the data through the table again, all what I get on the table's fields is undefined. I am a quiet beginner on JSON and jQuery.

What should I change on the jQuery function to make the app works as before and how can I get to inner JSON array on my jQuery?

just a pro tip, a `for` loop is faster and much easier to read. — r3wt, Dec 30 '14 at 16:05
Possible duplicate of [Convert JSON array to an HTML table in jQuery](http://stackoverflow.com/questions/1051061/convert-json-array-to-an-html-table-in-jquery) — John Slegers, Mar 19 '16 at 18:22

score 1 · Accepted Answer · answered Dec 30 '14 at 15:58

1

Try to loop over

jsonData.posts

Like:

 $.each( jsonData.posts, function( index, posts){     
    table += '<tr>';
    table += '<td class="edit" field="name" user_id="'+posts.id+'">'+posts.name+'</td>';
    table += '<td class="edit" field="email" user_id="'+posts.id+'">'+posts.email+'</td>';
    table += '<td class="edit" field="mobile" user_id="'+posts.id+'">'+posts.mobile+'</td>';
    table += '<td class="edit" field="address" user_id="'+posts.id+'">'+posts.address+'</td>';
    table += '<td><a href="javascript:void(0);" user_id="'+posts.id+'" class="delete_confirm btn btn-danger"><i class="icon-remove icon-white"></i></a></td>';
    table += '</tr>';
});

answered Dec 30 '14 at 15:58

Pataar

651
8
14

That didn't work... should I loop inside the previous loop or I sould replace this loop with the previous on? – sabsab Dec 30 '14 at 16:02
The answer is correct but it has one small issue... on function( index, posts) change the posts on the parameters to any other name like `obj` and also on the table `posts.name` to `obj.name` – sabsab Dec 30 '14 at 16:29
1

I am curious why need to change the variable name? It should be ok to use `posts`. – Tracholar Zuo Dec 30 '14 at 16:33

score 1 · Answer 2 · answered Dec 30 '14 at 16:02

1

change $.each( jsonData, ... to $.each( jsonData.posts, ...

Because you are traversing jsonData.posts

answered Dec 30 '14 at 16:02

Tracholar Zuo

467
2
8

2

You can use `console.log(jsonData)`, to verify the structure of jsonData is correct from console. May help! – Tracholar Zuo Dec 30 '14 at 16:12

jQuery Parsing JSON array to a table

2 Answers2