Display JSON Object values to a table

Question

My Json Array format, I tried to display the values in locTable in an html table

"categoryName": [
"Construction",
"Emergency Response",
"Equipment",
"General",
"General Safety",
"Marine",
"Materials",
"Products",
"Protection of Workers",
"Transport",
"Workplace"
],
"locTable": [
{
  "evaluationPercent": 100,
  "relevancePercent": 100,
  "category": "Workplace",
  "ldloc": []
},
{
  "evaluationPercent": 100,
  "relevancePercent": 100,
  "category": "Workplace",
  "ldloc": []
},
{
  "evaluationPercent": 100,
  "relevancePercent": 100,
  "category": "Workplace",
  "ldloc": []
},

My html code

 <table  class="red" style="width: 100%; height: 100%;">
 <thead>
 <tr>
 <th>Category</th>
 <th class="right">Rele Completed</th>
 <th class="right">Eval Completed</th>
 </tr>
 </thead>
 <tbody id="display" class="no-border-x">
 </tbody>
 </table>

I tried to iterate the Json object using jQuery , but i am not able to get the correct values displayed , the result of my code shows Undefined.The code that I tried to get result.

 var trHTML = '';
 jQuery.each(json.locTable, function (k, item) {                   
 trHTML += '<tr><td>' + item.category + '</td><td>'       
 +item.evaluationPercent + '</td><td>' +item.relevancePercent +
 '</td></tr>';
 });
 jQuery('#display').append(trHTML);

score 0 · Answer 1 · answered Jan 20 '16 at 18:40

I don't know if you didn't post your entire JSON, but as it stands currently it's invalid. This is valid:

var json = {
  "categoryName": [
    "Construction",
    "Emergency Response",
    "Equipment",
    "General",
    "General Safety",
    "Marine",
    "Materials",
    "Products",
    "Protection of Workers",
    "Transport",
    "Workplace"
  ],
  "locTable": [{
    "evaluationPercent": 100,
    "relevancePercent": 100,
    "category": "Workplace",
    "ldloc": []
  }, {
    "evaluationPercent": 100,
    "relevancePercent": 100,
    "category": "Workplace",
    "ldloc": []
  }, {
    "evaluationPercent": 100,
    "relevancePercent": 100,
    "category": "Workplace",
    "ldloc": []
  }]
};

And it works, see: https://jsfiddle.net/ve7r4422/

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

At a glance, I think there is a problem with the xml format.

There is several posts that may answer to your problem, like this:

Convert JSON array to an HTML table in jQuery

edited May 23 '17 at 11:52

Community

1
1

answered Jan 20 '16 at 18:40

Juan Elfers

770
7
13

score 0 · Answer 3 · answered Jan 20 '16 at 18:44

var json = {
  "locTable": [{
    "evaluationPercent": 80,
    "relevancePercent": 100,
    "category": "Workplace",
    "ldloc": []
  }, {
    "evaluationPercent": 90,
    "relevancePercent": 70,
    "category": "Workplace",
    "ldloc": []
  }, {
    "evaluationPercent": 100,
    "relevancePercent": 40,
    "category": "Workplace",
    "ldloc": []
  }]
};

jQuery('#display').append($.map(json.locTable, function(record){
  return '<tr><td>'+ record.category +'</td><td>'+ record.evaluationPercent +'</td><td>'+ record.relevancePercent +'</td></tr>';
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="red" style="width: 100%; height: 100%;">
  <thead>
    <tr>
      <th>Category</th>
      <th class="right">Rele Completed</th>
      <th class="right">Eval Completed</th>
    </tr>
  </thead>
  <tbody id="display" class="no-border-x"></tbody>
</table>

Display JSON Object values to a table

3 Answers3