Json to html table: Multiple entries and columns

Question

I have this json data that I'm trying to put into an html table:

{
"users":{
  "key":[
     "3128",
     "3108"
  ],
  "name":[
     "jason",
     "fred"
  ]
 }
}

I wanted to make both key and name to separate columns in the table. I'm using this jquery code. Its placing the data properly in the in each column, however its duplicating the data. I'm guessing its because I'm looping through multiple times.

var url = "http://localhost/test.php";
$.getJSON(url,function(data){
 var table = '<table><thead><tr><th>Key</th><th>Name</th></tr></thead><tbody>';
    $.each(data, function(i, param) {
            $.each(param['key'], function(l, k) {
            $.each(param['name'], function(l, p) {
                    table +="<tr><td>" + k + "</td>"+"<td>" + p  + "</td></tr>";
                                                });
                                          });
                                     });
     table += '</tbody></table>';
   $("#jsondata").html( table );
});

How do I stop duplicating the data in the columns I'm creating?

Help is greatly appreciated!

Stephan Kulla · Accepted Answer · 2014-04-03 19:21:53Z

1

I would do it like this (inside the closure of the getJSON function):

var table = '<table><thead><tr><th>Key</th><th>Name</th></tr></thead><tbody>';
var users = data.users;
$.each(data.users.key, function(i, key) {
    table +="<tr><td>" + key + "</td>"+"<td>" + data.users.name[i]  + "</td></tr>";
});
table += '</tbody></table>';

Here the code in jsFiddle: http://jsfiddle.net/QchnP/

A note: In the line $.each(data, function(i, param) { you will iterate over each property of the JSON dictionary, which is not necessary (if you only have an interest in the users value).

edited Apr 3, 2014 at 19:21

answered Apr 3, 2014 at 19:12

Stephan Kulla

5,1273 gold badges28 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

Json to html table: Multiple entries and columns

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related