Display data of an associative array in a table with javascript

Question

I have an issue with displaying data of an associative array in a table. Here is my code:

$.getJSON('json/data.json', function(data){
    var items=[];
    $.each(data, function(key, val){
        $.each(val, function(keyItem, valItem){
            items.push('<td>'+valItem+'</td>');
        });
        $('<tr/>', {html: items.join('')}).appendTo('.table tbody');
    });
});

Here is my array:

[
    {
        "firstName": "Mike",
        "lastName": "Winston",
        "sex": "male",
        "age": "28"
    },
    {
        "firstName": "Mikki",
        "lastName": "Grathem",
        "sex": "female",
        "age": "21"
    },
    {
        "firstName": "Nick",
        "lastName": "Malboro",
        "sex": "male",
        "age": "31"
    }
]

I need that the data of the array is displayed in a new line of the table. Now I have such situation:

Table shows A,AB,ABC instead of A,B,C

Where is a mistake?

I have no enough reputation for this action.

DimonK
– DimonK

2015-05-06 14:51:49 +00:00
Commented May 6, 2015 at 14:51 — DimonK
– DimonK, Commented May 6, 2015 at 14:51

Volkan Ulukut · Accepted Answer · 2015-05-06 14:00:36Z

2

You need to empty the items array for each row:

$.getJSON('json/data.json', function(data){
    var items=[];
    $.each(data, function(key, val){
        items=[];
        $.each(val, function(keyItem, valItem){
            items.push('<td>'+valItem+'</td>');
        });
        $('<tr/>', {html: items.join('')}).appendTo('.table tbody');
    });
});

answered May 6, 2015 at 14:00

Volkan Ulukut

4,2281 gold badge24 silver badges40 bronze badges

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

Comments

Thomas Roch · Accepted Answer · 2015-05-06 14:07:43Z

1

Reset items at the right place:

$.getJSON('json/data.json', function(data){
    $.each(data, function(key, val){
        var items=[];
        $.each(val, function(keyItem, valItem){
            items.push('<td>'+valItem+'</td>');
        });
        $('<tr/>', {html: items.join('')}).appendTo('.table tbody');
    });
});

Also a way to do this ES5+ / functional style (untested):

$.getJSON('json/data.json', function(data){
    $('.table tbody').append(
       data.map(function (row) {
           return $('<tr/>').append(
               Object.keys(row).map(function (key) {
                   return $('<td/>').text(row[key]);
               });
           );
       });
    );
});

edited May 6, 2015 at 14:07

answered May 6, 2015 at 14:00

Thomas Roch

1,2168 silver badges19 bronze badges

Comments

ssube · Accepted Answer · 2015-05-06 14:03:10Z

You aren't emptying your array between iterations, so all of the items pile up and create more and more columns. You should move the items array inside the $.each function, so it starts empty for each item.

var data = [{
  "firstName": "Mike",
  "lastName": "Winston",
  "sex": "male",
  "age": "28"
}, {
  "firstName": "Mikki",
  "lastName": "Grathem",
  "sex": "female",
  "age": "21"
}, {
  "firstName": "Nick",
  "lastName": "Malboro",
  "sex": "male",
  "age": "31"
}];


function process(data) {
  $.each(data, function(key, val) {
    var items = [];
    $.each(val, function(keyItem, valItem) {
      items.push('<td>' + valItem + '</td>');
    });
    $('<tr/>', {
      html: items.join('')
    }).appendTo('.table tbody');
  });
}

process(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table"><tbody></tbody></table>

Collectives™ on Stack Overflow

Display data of an associative array in a table with javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related