javascript - 使用 jQuery 将 XML 转换为 JSON 并输出为 HTML

Question

我正在尝试测试我的想法，但使用此 XML 到 JSON 脚本: https://github.com/sergeyt/jQuery-xml2json

然后获取 JSON 数据，然后使用 jQuery 将其输出到 HTML 中。

到目前为止，我已经能够正确加载数据，并且可以 console.log 输出 JSON 数据，结果如下:

releases:
  $: {}
  matching_count: "698"
  returned_count: "50"
  latestModified: "1537876805"
  release: Array(50)
   0:
    $: {}
    id: "713"
    headline: "Eiger BioPharmaceuticals to Participate in Investor Conferences"
    released: "1537876800"
    releaseDate: "Tue, 25 Sep 2018 08:00:00 -0400"
    modified: "1537876805"
    modifiedDate: "Tue, 25 Sep 2018 08:00:05 -0400"
  1:
   $: {}
    id: "712"
    headline: "Communications industry innovator to speak at AMEC Global Summit"
    released: "1491400800"
    releaseDate: "Wed, 05 Apr 2017 10:00:00 -0400"
    modified: "1491400806"
    modifiedDate: "Wed, 05 Apr 2017 10:00:06 -0400"
...

到目前为止我的 JS 代码是这样的:

var ul = $("<ul>").appendTo("body");
$.ajax({
  url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/8689/list.xml",
  dataType: "xml",
  success: function(response) {
    json = $.xml2json(response);
    console.log(json);
    $(json).each(function(index, headline) {
      ul.append($(document.createElement("li")).text(headline));
    });
  }
});

问题是，当它渲染出来时，返回的只是单个li中的[object Object]。

所以，我知道我做错了一些事情，但我不确定我需要在哪里、在什么时候进行更改以获取数据，以便我可以渲染出标题， 发布日期，等等。

我在这里创建了一个 Codepen: https://codepen.io/ultraloveninja/pen/YzPRjRw

我读到我可能需要使用jQuery.parseJSON，但经过一番测试后，我收到了一些错误，因为它仍然进入该object.Object再次。

我觉得我需要进一步深入了解 releases.release ，因为这是所有数据要渲染的地方。

Answer 1

您尝试循环的响应是一个表示 xml 文档的对象。要访问releases数组，您必须使用json["#document"].releases.release

var ul = $("<ul>").appendTo("body");
$.ajax({
  url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/8689/list.xml",
  dataType: "xml",
  success: function(response) {
    json = $.xml2json(response);
    let release = json["#document"].releases.release
    $(release).each(function(index, headline) {
      ul.append($(document.createElement("li")).text(headline.headline));
    });
  }
});

Example