循环遍历 JSON 数组来创建表

Question

我有一个 JSON 数组，我想循环遍历它来创建一个表。

TITLE 等当然是表格的标题以及放置在下面的相关数据。

PHP 文件的 JSON 结果

[
  {
     "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);

我相信解决方案应该是在 javascript 中，但无法完全弄清楚如何解决该问题，因为对 JSON 和 JAVASCRIPT 很陌生。

Answer 1

像这样 - 使用 jQuery，因为它使 Ajax 和后续处理变得更加简单 - 请注意，您不必解析服务器上的 XML 并创建 JSON。您可以只将 XML 提供给 jQuery 并进行类似的处理：

  // 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   

如果要指定每个字段：

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

我使用的标记在哪里

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

结果：

  // 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   

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

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

普通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" }];
  
$(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>