Loop through JSON and append to HTML table

Question

HTML

<table id="id_kbdata" cellspacing="0" cellpadding="0" >
</table>

JSON

[  
{  
  "id":"3",
  "title":"Doing Business In...",
  "businessSubjectAreas":[  
     {  
        "businessSubjectArea":"Market and Sell Products/Service"
     },
     {  
        "businessSubjectArea":"Deliver Products/Services"
     },
     {  
        "businessSubjectArea":"HR"
     },
     {  
        "businessSubjectArea":"Legal"
     },
     {  
        "businessSubjectArea":"Finance"
     },
     {  
        "businessSubjectArea":"Tax"
     },
     {  
        "businessSubjectArea":"Treasury"
     },
     {  
        "businessSubjectArea":"IT"
     }
  ],
  "attachmentFiles":[  
     {  
        "fileName":"test.pdf",
        "url":"http://google.com/test.pdf"
     }
  ],
  "error":null
 },
 {  
  "id":"65",
  "title":"Dialing Instructions",
  "businessSubjectAreas":[  
     {  
        "businessSubjectArea":"Administrative"
     }
  ],
  "attachmentFiles":[  

  ],
  "error":null
 },
 {  
  "id":"132",
  "title":"WA - Western Australia - Drilling Fluid Management",
  "businessSubjectAreas":[  
     {  
        "businessSubjectArea":"Market and Sell Products/Service"
     },
     {  
        "businessSubjectArea":"Deliver Products/Services"
     },
     {  
        "businessSubjectArea":"Legal"
     }
  ],
  "attachmentFiles":[  
     {  
        "fileName":"test.pdf",
        "url":"http://google.com/test.pdf"
     }
  ],
  "error":null
 },
 {  
  "id":"133",
  "title":"WA - Natural gas from shale and tight rock - Overview of WA regulatory framework",
  "businessSubjectAreas":[  
     {  
        "businessSubjectArea":"Market and Sell Products/Service"
     },
     {  
        "businessSubjectArea":"Deliver Products/Services"
     },
     {  
        "businessSubjectArea":"Legal"
     }
  ],
  "attachmentFiles":[  
     {  
        "fileName":"test.pdf",
        "url":"http://google.com/test.pdf"
     }
  ],
  "error":null
 }
]

Here I am trying to loop through above JSON response and append the resulted values in HTML table. But unable to do it, below is what I tried so far.

Actually I am confused how to use the nested values from JSON like "businessSubjectArea". I just wanted to append the values in table td's and nested values in li's

$.each(json, function(index, value) {
 $("#id_kbdata").append(
     " <tr><td style='text-align:left;font-family:arial;padding:5px 10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;width:33%;'>"  
     + this.title + 
     "</td><td style='text-align:left;font-family:arial;padding:5px 10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;width:33%;'> "

     + "<ul>" +
     $.each(this.businessSubjectAreas, function(index, value) {
        "<li>" + this.businessSubjectAreas.businessSubjectArea + "</li>"
     }); 
     + "</ul>" +         

     " </td></tr>"
 );
});

Any help would be highly appreciated.

possibly duplicate https://stackoverflow.com/questions/23599995/generate-html-table-from-json-data — Alpesh Jikadra, Apr 06 '18 at 12:36
Possible duplicate of [Access / process (nested) objects, arrays or JSON](https://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — Heretic Monkey, Apr 06 '18 at 12:41

Zaki Mohammed · Answer 1 · 2018-04-06T12:45:58.760

0

Include "tbody" within table and then append rows to it

<table id="id_kbdata" cellspacing="0" cellpadding="0" >
    <tbody></tbody>
</table>

and append as

var html = "";

html += "<tr>";
html += "   <td style='text-align:left;font-family:arial;padding:5px 10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;width:33%;'>";
html +=         this.title;
html += "   </td>";
html += "   <td style='text-align:left;font-family:arial;padding:5px 10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;width:33%;'>";
html += "       <ul>";

$.each(this.businessSubjectAreas, function(index, value) {
    html += "<li>" + value.businessSubjectArea + "</li>";
}); 

html += "       </ul>";
html += "   </td>";
html += "</tr>";

$("#id_kbdata > tbody").append(html);

Hope it helps

edited Apr 06 '18 at 12:45

answered Apr 06 '18 at 12:40

Zaki Mohammed

969
14
24

No, the problem is not with tbody, I think the problem is with second each loop – vamsi Apr 06 '18 at 12:45
Yeah I have updated the answer try use "value.businessSubjectArea' within inside each loop I guess you are repeating the businessSubjectAreas again – Zaki Mohammed Apr 06 '18 at 12:46

score 0 · Answer 2 · answered Apr 06 '18 at 13:20

I guess this will help.

Note: This is done using js alone.

var jsonObj = [{"id":"3","title":"Doing Business In...","businessSubjectAreas":[{"businessSubjectArea":"Market and Sell Products/Service"},{"businessSubjectArea":"Deliver Products/Services"},{"businessSubjectArea":"HR"},{"businessSubjectArea":"Legal"},{"businessSubjectArea":"Finance"},{"businessSubjectArea":"Tax"},{"businessSubjectArea":"Treasury"},{"businessSubjectArea":"IT"}],"attachmentFiles":[{"fileName":"test.pdf","url":"http://google.com/test.pdf"}],"error":null},{"id":"65","title":"Dialing Instructions","businessSubjectAreas":[{"businessSubjectArea":"Administrative"}],"attachmentFiles":[],"error":null},{"id":"132","title":"WA - Western Australia - Drilling Fluid Management","businessSubjectAreas":[{"businessSubjectArea":"Market and Sell Products/Service"},{"businessSubjectArea":"Deliver Products/Services"},{"businessSubjectArea":"Legal"}],"attachmentFiles":[{"fileName":"test.pdf","url":"http://google.com/test.pdf"}],"error":null},{"id":"133","title":"WA - Natural gas from shale and tight rock - Overview of WA regulatory framework","businessSubjectAreas":[{"businessSubjectArea":"Market and Sell Products/Service"},{"businessSubjectArea":"Deliver Products/Services"},{"businessSubjectArea":"Legal"}],"attachmentFiles":[{"fileName":"test.pdf","url":"http://google.com/test.pdf"}],"error":null}];


// using createElement
var myTable = document.getElementById('id_kbdata');
for (var i = 0; i < jsonObj.length; i++) {
  var tbRow = document.createElement('tr');
  var tbData1 = document.createElement('td');
  tbData1.innerHTML = jsonObj[i]['title'];
  var tbData2 = document.createElement('td');
  var bsa = jsonObj[i]['businessSubjectAreas'];
  for (var j = 0; j < bsa.length; j++) {
    var li = document.createElement('li');
    li.innerHTML = bsa[j]['businessSubjectArea'];
    tbData2.append(li);
  }
  tbRow.append(tbData1);
  tbRow.append(tbData2);
  myTable.append(tbRow);
}

//using innerHTML
var html = "";
for (var i = 0; i < jsonObj.length; i++) {
  html += "<tr><td>" + jsonObj[i]['title'] + "</td><td>";
  for (var j = 0; j < bsa.length; j++) {
    html += "<li>" + bsa[j]['businessSubjectArea'] + "</li>";
  }
  html += "</td></tr>";
}
document.getElementById("id_kbdata_1").innerHTML = html;

td {
  text-align: left;
  font-family: arial;
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  width: 33%;
}

<table id="id_kbdata" cellspacing="0" cellpadding="0"></table>
<br>
<table id="id_kbdata_1" cellspacing="0" cellpadding="0" style="color:red"></table>

Loop through JSON and append to HTML table

2 Answers2