How to Create dynamic table with json object using jquery

Question

I have json like below.I have to generate dynamic th with json key. and generate tr and td with its value.How to achive this.

let jsonObj= {
       "No of cells":[
          "65",
          "65",
       ],
       "Current density":{
          "Unit":"A/cm2",
          "Values":[
             "0.2",
             "0.4",
          ]
       }
       
    }

I need table like

<table>
<th>No of cells</th>
<th>Current density</th>
<tr>
<td>65</td>
<td>0.2</td>
</tr>
<tr>
<td>65</td>
<td>0.4</td>
</tr>
</table>

I Have tried like this:

var idx =0;
for(let key in jsonObj){
console.log(key)
// for(let key in jsonObj){
    var row = "<tr>";
  row += "<td>" + jsonObj[key] + "</td>";
  row += "<td>" + jsonObj[key][idx] + "</td>";
  row += "<td>" + jsonObj[key][idx] + "</td>";
  row += "</tr>";
idx++;
$("#data").append(row);

// }

}

But this not working.Please Help me

Harshana · Accepted Answer · 2020-11-12 06:36:39Z

2

Assuming that the two Keys in the JSON Object has same number of values. You can use the following solution to fulfill your task.

let jsonObj = {
  "No of cells": [
    "65",
    "65",
  ],
  "Current density": {
    "Unit": "A/cm2",
    "Values": [
      "0.2",
      "0.4",
    ]
  }

}
var row = "";
for (let key in jsonObj){
  row += `<th>${key}</th>`;
}

$("#data").append(row);

row = "";

for (let idx in jsonObj["No of cells"]) {
  var row = "<tr>";
  row += "<td>" + jsonObj["No of cells"][idx] + "</td>";
  row += "<td>" + jsonObj["Current density"]["Values"][idx] + "</td>";
  row += "</tr>";
  
  $("#data").append(row);
}

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

</table>

edited Nov 12, 2020 at 6:36

answered Nov 12, 2020 at 6:06

Harshana

5,5561 gold badge22 silver badges30 bronze badges

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

1 Comment

Hari Over a year ago

need th also dynamic. is it possible?

Collectives™ on Stack Overflow

How to Create dynamic table with json object using jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related