Loop through a JSON array to create a Table

javascript, json, loops

Solution

Like this - using jQuery because it makes Ajax and subsequent processing much simpler - please note you do not have to parse the XML on the server and create JSON. You could just serve the XML to the jQuery and have similar processing:

  // here is your success from AJAX

  var tbody = $("<tbody />"),tr;
  $.each(data,function(_,obj) {
      tr = $("<tr />");
      $.each(obj,function(_,text) {
        tr.append("<td>"+text+"</td>")
      });
      tr.appendTo(tbody);
  });
  tbody.appendTo("#table1"); // only DOM insertion   

If you want to specify each field:

      tr
      .append("<td>"+obj.TITLE+"</td>")
      .append("<td>"+obj.ARTIST+"</td>")      

where the markup I use is

<table id="table1">
  <thead></thead>
</table>

Result:

const data = [
  { "TITLE": "Empire Burlesque", "ARTIST": "Bob Dylan", "COUNTRY": "USA", "COMPANY": "Columbia",   "PRICE": "10.90", "YEAR": "1985" }, 
  { "TITLE": "Picture book", "ARTIST": "Simply Red", "COUNTRY": "EU", "COMPANY": "Elektra", "PRICE": "7.20", "YEAR": "1985" }];
  
$(function() {
  const thead = $("#table1 thead");
  const tbody = $("#table1 tbody");
  let tr = $("<tr />");

  $.each(Object.keys(data[0]), function(_, key) {
    tr.append("<th>" + key + "</th>")
  });
  tr.appendTo(thead);

  $.each(data, function(_, obj) {
    tr = $("<tr />");
    $.each(obj, function(_, text) {
      tr.append("<td>" + text + "</td>")
    });
    tr.appendTo(tbody);
  });
})

td {
  border: 1px solid black;
  padding: 5px
}

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

Plain JS

const data = [
  { "TITLE": "Empire Burlesque", "ARTIST": "Bob Dylan", "COUNTRY": "USA", "COMPANY": "Columbia",   "PRICE": "10.90", "YEAR": "1985" }, 
  { "TITLE": "Picture book", "ARTIST": "Simply Red", "COUNTRY": "EU", "COMPANY": "Elektra", "PRICE": "7.20", "YEAR": "1985" }];
  
window.addEventListener('DOMContentLoaded', () => {
  const thead = document.querySelector("#table1 thead");
  const tbody = document.querySelector("#table1 tbody");
  
  thead.innerHTML = `<tr>
      ${Object.keys(data[0]).map(key => `<th>${key}</th>`).join('')}
    </tr>`;

  tbody.innerHTML =  data
    .map(item => `<tr>
      ${Object.values(item).map(val => `<td>${val}</td>`).join('')}
    </tr>`).join('')
})

td {
  border: 1px solid black;
  padding: 5px
}
td:nth-child(5) { text-align:right }

<table id="table1">
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

Problem

Original source