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":"[email protected]",
      "2":"[email protected]",
      "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":"[email protected]",
         "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
– r3wt, Commented Dec 30, 2014 at 16:05
Possible duplicate of Convert JSON array to an HTML table in jQuery — John Slegers
– John Slegers, Commented Mar 19, 2016 at 18:22

Pataar · Accepted Answer · 2014-12-30 15:58:36Z

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, 2014 at 15:58

Pataar

6618 silver badges14 bronze badges

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

3 Comments

alsabsab Over a year ago

That didn't work... should I loop inside the previous loop or I sould replace this loop with the previous on?

alsabsab Over a year ago

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

Tracholar Zuo Over a year ago

I am curious why need to change the variable name? It should be ok to use posts.

Tracholar Zuo · Accepted Answer · 2014-12-30 16:02:11Z

1

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

Because you are traversing jsonData.posts

answered Dec 30, 2014 at 16:02

Tracholar Zuo

4672 silver badges8 bronze badges

1 Comment

Tracholar Zuo Over a year ago

You can use console.log(jsonData), to verify the structure of jsonData is correct from console. May help!

Collectives™ on Stack Overflow

jQuery Parsing JSON array to a table

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related