CODEWITHSUNDEEP
javascriptjqueryjson
Behseini
Behseini

Reputation: 6330

How to load JSON to HTML table properly

I am trying to load a JSON data to an HTML table which the desired output should look like:

enter image description here

but I am getting this:

enter image description here

Here is my attempt:

var data = {
        "action":
            [
                { "id": "1001", "type": "Matrix" },
                { "id": "1002", "type": "IP Man" },
                { "id": "1003", "type": "Revenge" }
            ],
        "comedy":
            [
                { "id": "2001", "type": "Iceman" },
                { "id": "2002", "type": "Pat & Mat" },
                { "id": "2003", "type": "Sugar" }
                 ],
        "animation":
            [
                { "id": "3001", "type": "Frozen" },
                { "id": "3002", "type": "Tangled" },
                { "id": "3003", "type": "Croods" }
                 ]
    
    };
    
for (var i in data) {
  $('#result').append('<table class="table table-striped"><thead><tr><th>Id</th><th>Type</th></tr></thead><tbody class="map"></tbody></table>');
}
var tds = '<tr>';
for (var j = 0; j < data[i].length; j++) {
  var obj = data[i][j];
  tds += '<td>' + obj.id + '</td>';
  tds += '<td>' + obj.type + '</td>';
}
$('.map').append(tds);
    
body {
  background: white;
}

table {
  margin: 10px;
  border: 2px solid #eee;
}

td {
  margin: 10px;
  border: 2px solid #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

How can I fix this?

Upvotes: 0

Views: 58

Answers (3)

funcoding
funcoding

Reputation: 801

var data = {
        "action":
            [
                { "id": "1001", "type": "Matrix" },
                { "id": "1002", "type": "IP Man" },
                { "id": "1003", "type": "Revenge" }
            ],
        "comedy":
            [
                { "id": "2001", "type": "Iceman" },
                { "id": "2002", "type": "Pat & Mat" },
                { "id": "2003", "type": "Sugar" }
                 ],
        "animation":
            [
                { "id": "3001", "type": "Frozen" },
                { "id": "3002", "type": "Tangled" },
                { "id": "3003", "type": "Croods" }
                 ]
    
    };
    

var keys = Object.keys(data);

keys.forEach((key) => {

    $('#result').append('<table class="table table-striped"><thead><tr><th>Id</th><th>Type</th></tr></thead><tbody class="map" id="'+key+'" ></tbody></table>');
	data[key].forEach((obj) =>{

		$('#'+key).append("<tr><td>"+obj.id+"</td><td>"+obj.type+"</td></tr>");
	})
})
body {
  background: white;
}

table {
  margin: 10px;
  border: 2px solid #eee;
}

td {
  margin: 10px;
  border: 2px solid #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

Upvotes: 0

gsc
gsc

Reputation: 1559

First problem: you had opened a tr element, but hadn’t closed it. Second problem: you were analyzing only the last “category” (animation).

var data = {
  "action": [
    { "id": "1001", "type": "Matrix" },
    { "id": "1002", "type": "IP Man" },
    { "id": "1003", "type": "Revenge" }
  ],
  "comedy": [
    { "id": "2001", "type": "Iceman" },
    { "id": "2002", "type": "Pat & Mat" },
    { "id": "2003", "type": "Sugar" }
  ],
  "animation": [
    { "id": "3001", "type": "Frozen" },
    { "id": "3002", "type": "Tangled" },
    { "id": "3003", "type": "Croods" }
  ]
};

var result = $('#result');

for (var category in data) {
  result.append(
    '<table class="table table-striped"><thead>' +
    '<tr><th>Id</th><th>Type</th></tr>' +
    '</thead><tbody id="map_' + category + '"></tbody></table>'
  );

  for (var i = 0; i < data[category].length; ++ i) {
    var item = data[category][i];

    $('#map_' + category).append(
      '<tr><td>' + item.id + '</td><td>' + item.type + '</td></tr>'
    );
  }
}

Upvotes: 1

Simon
Simon

Reputation: 784

You are not closing off the row in the for loop. You need to include the and elements in the loop too because you are adding rows, not cells.

Upvotes: 0

Related Questions