Creating a HTML Table from nested JSON using JQuery

Question

I have a sample JSON like this:

 }
   "vehicles":"4door",
   "cars": {
   "Toyota":"Camry",
   "Ford":"Explorer",
   "Nissan":"Altima",
   "Jeep":"Wrangler"
   },
   "color":"red"
 }

I'm trying to make an HTML table with 2 columns called something like "Make" and "Model" using the sample JSON with JQuery using the "cars" array out of the JSON without taking the other items vehicles and color. The "Make" would be the keys of the JSON and the "Model" would be the values of the keys. I'm trying to get it to look something like this below but in a table format. Any help or advice would be greatly appreciated.

Make    Model
Toyota  Camry
Ford    Explorer
Nissan  Altima
Jeep    Wrangler

Am I the only one feeling weird about that car object? It should be ”cars”: [{ “make”: “Nissan”, “model”: “Almera” }, {...}], shouldn’t it? — Davide Vitali
– Davide Vitali, Commented Mar 26, 2019 at 5:10

brk · Accepted Answer · 2019-03-26 05:00:44Z

2

Use Object.keys which will give an array of keysThen you can iterate it and get the key value from the object and use template literals to create a row and finally append to the table

let cars = {
  "Toyota": "Camry",
  "Ford": "Explorer",
  "Nissan": "Altima",
  "Jeep": "Wrangler"
}

let getKeys = Object.keys(cars);


let row = '';
for (let i = 0; i < getKeys.length; i++) {
  row += `<tr><td>${getKeys[i]}</td><td>${cars[getKeys[i]]}</td></tr>`
}

$('#carTable').append(row)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='carTable'>

</table>

answered Mar 26, 2019 at 5:00

brk

50.3k10 gold badges59 silver badges85 bronze badges

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

1 Comment

King11 Over a year ago

Thank you very much, that worked! The other solution worked as well but I can only choose one answer. So I went with this one. Thank you

ellipsis · Accepted Answer · 2019-03-26 05:14:44Z

2

Use Object.keys to get an array of the cars and loop through them using forEach loop. Using append in jquery append the row to the table

var data = {
  "vehicles": "4door",
  "cars": {
    "Toyota": "Camry",
    "Ford": "Explorer",
    "Nissan": "Altima",
    "Jeep": "Wrangler"
  },
  "color": "red"
}
var str='';
Object.keys(data.cars).forEach(e => {
  str+='<tr><td>' + e + '</td><td>' + data.cars[e] + '</td></tr>';
})
$('#data').append(str)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tr>
    <td>Make</td>
    <td>Model</td>
  </tr>
</table>

edited Mar 26, 2019 at 5:14

answered Mar 26, 2019 at 4:58

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

1 Comment

King11 Over a year ago

Thank you, this solution worked as well. I can only choose one answer though. But I upvoted to hopefully show others that come across this question to show that this answer works as well. Thank you again.

mk358 · Accepted Answer · 2019-03-26 05:06:06Z

0

You can also create your entire html from the script

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var html = ""
var json = {
"vehicles":"4door",
"cars": {
"Toyota":"Camry",
"Ford":"Explorer",
"Nissan":"Altima",
"Jeep":"Wrangler"
},
"color":"red"
}
html = "<table><thead><th><td>Make</td><td>Model</td></th></thead><tbody>"
for(var x in json.cars){
    html+= "<tr><td>"+ x +"</td><td>"+ json.cars[x] +"</td></tr>"
}
html+="</tbody></table>"
$("#main").append(html)
});
</script>
</head>
<body>

<div id="main"></div>

</body>
</html>

answered Mar 26, 2019 at 5:06

mk358

544 bronze badges

Comments

Jan Lois · Accepted Answer · 2019-03-26 06:03:53Z

0

Here I seen json format was not correct also get jsonObject.KeyName hold in variable then loop json that holds variable.

var obj = {"Toyota":"Camry",   "Ford":"Explorer",   "Nissan":"Altima",   Jeep":"Wrangler"};
for (var key in obj) {  
if (obj.hasOwnProperty(key)) {
    var val = obj[key];
    console.log(val);
  }
}

After that you implement in html format.

edited Mar 26, 2019 at 6:03

Jan Lois

1759 bronze badges

answered Mar 26, 2019 at 5:38

Tarun Kumar

12 bronze badges

Comments

Dheeraj kumar Rao · Accepted Answer · 2019-03-26 06:32:09Z

0

var data = {
   "vehicles": "4door",
    "cars": {
        "Toyota": "Camry",
        "Ford": "Explorer",
        "Nissan": "Altima",
         "Jeep": "Wrangler"
    },
   "color": "red"
};
var cars = data.cars; // for better performance if large table
var tableData = Object.keys(cars).map(item => '<tr><td>' + item + '</td><td>' + cars[item] + '</td></tr>').join('');

$('#main>table').append(tableData)


<div id="main">
   <table>
     <tr>
        <td>Make</td>
        <td>Model</td>
     </tr>
   </table>
</div>

answered Mar 26, 2019 at 6:32

Dheeraj kumar Rao

10.5k3 gold badges26 silver badges26 bronze badges

Collectives™ on Stack Overflow

Creating a HTML Table from nested JSON using JQuery

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related