javascript - Loop through a JSON array to create a Table

Question

I have a JSON array that I would like to loop through to create a table.

TITLE etc would of course be the headings of the table and the associated data placed underneath.

JSON Result from PHP file

[
  {
     "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"
  }
]

PHP

$filterText = "1985";//$_REQUEST["text"];

$filename = "xml/xml_cd.xml";
$filterHeading = "YEAR";
$filterText = "1985";//$_REQUEST["text"];

$file = simplexml_load_file($filename);

$children = $file->children();
$firstchild = $children[0];
$node = $firstchild->getName();

$result = $file->xpath('//'.$node.'['. $filterHeading . '/text()="'.$filterText.'"]');

$jsondata = json_encode($result,true);

print_r($jsondata);

I believe the solution should be in javascript but can't quite work out how to tackle the problem, being new to JSON and JAVASCRIPT.

Answer 1

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>