使用 jQuery 将 JSON 提要解析为 HTML答案

【问题标题】：Parse JSON feed to HTML with jQuery使用 jQuery 将 JSON 提要解析为 HTML
【发布时间】：2015-01-15 16:03:55
【问题描述】：

我正在尝试将以下 JSON 提要解析为 HTML，但没有得到任何结果。

{
  @name: "App name",
  license: [
    {
      @name: "Apache License 2.0",
      component: [
        {
          name: "Product 1",
          url: "http://www.url.com"
        }, {
          name: "Product 2",
          url: "http://www.url.com"
        }, {
          name: "Product 3",
          url: "http://www.url.com"
        }
      ],
      licensetext: " license text here"
    }
  ],
  isProjectComplete: "true"
}

使用这个 jQuery：

$.getJSON("https://json-feed-url.json", function (data) {
  var jsondata = json;
  var output = "<ul>";
  for (var i in jsondata.events) {
    output += "<li>" 
      + jsondata.component[i].name + " " 
      + jsondata.component[i].url + "--"
      + jsondata.license[i].licensetext
      + "</li>";
  }

  output += "</ul>";
  document.getElementById("content").innerHTML = output;
});

到这个div

<div id="content"></div>

不知道为什么它没有正确解析。这是jsFiddle。

【问题讨论】：

不确定您的 JSON 是否有效，请验证 here。有效的 JSON 应以 {"@name": "App name"开头，另一方面，对于跨域请求，您需要 JSONp。
您的密钥需要被引用：例如"@name" 代替 @name，"license" 代替 license 等
@skobaljic，JSON 有效，并且直接来自 AWS 实例。我会分享 URL，但它有一个查看提要所需的密钥。

标签： jquery json parsing

【解决方案1】：

您有几个错误，从您发布的无效 JSON 开始。更正它应该可以正常工作，如您所见 HERE 及以下：

var yourJson = {
    "@name": "App name",
        "license": [{"@name": "Apache License 2.0",
            "component": [{
            "name": "Product 1",
                "url": "http://www.url.com"
        }, {
            "name": "Product 2",
                "url": "http://www.url.com"
        }, {
            "name": "Product 3",
                "url": "http://www.url.com"
        }],
            "licensetext": " license text here"
    }],
        "isProjectComplete": "true"
};

function convertJson(data) {
    var jsondata = data;
    var output = "<ul>";
    for (var i in jsondata.license[0].component) {
        output += "<li>" + jsondata.license[0].component[i].name + " " + jsondata.license[0].component[i].url + "--" + jsondata.license[0].licensetext + "</li>";
    }

    output += "</ul>";
    document.getElementById("content").innerHTML = output;
};

convertJson(yourJson);

你应该更加小心，你应该学会更有效地使用调试工具。

【讨论】：

我的 JSON 提要是正确的。我正在使用 chrome 中的 JSON View 扩展来查看我的提要（去掉双引号）我不确定从 var yourJson = {} 更改为使用 URL 的语法
感谢您的帮助。我更新了 jsfiddle（删除了实际 url），但它仍然没有拉入提要。这是当我有实际数据时，但没有 URL。
在两个不同的版本上工作，但现在使用静态内容。还试图弄清楚如何将href 应用于 url 输出
我用"<a href='license[0].component[i].url'>" + jsondata.license[0].component[i].url + "</a>" 封装了网址，但它没有相应地应用网址。
让我们continue this discussion in chat。

【解决方案2】：

你在 jsFiddle 中有错字

// WRONG
$.getJSON("http://jsonurl.json";, function (data) {
// CORRECT
$.getJSON("http://jsonurl.json", function (data) {

【讨论】：

也许我变老了，但是 WRONG 和 CORRECT 版本看起来完全一样...我认为您的意思是删除 CORRECT 版本中的分号？
是的，我的意思是删除分号。