读取嵌套的 Json 文件以显示在网页上

Question

我有一个存储 Reddit 帖子标题及其总分的 JSON 文件：

{
  "'JavaFX Simple Inventory Management App - Open source'": 39, 
  "'Creating Formula Dependency Maps from Excel Spreadsheets'": 5, 
  "'CVE-2017-5645: Apache Log4j socket receiver deserialization vulnerability'": 11
}

我可以使用以下代码轻松访问这些数据并将其列出到 DOM：

$.getJSON("./data.json", function(json) {
    var list = [];
    /*Adds each key value pair to a `<li> tag`.*/
    $.each(json, function(key, val) {
        list.push("<li id='redditData'>" + key + ": " + val + "</li>");
    });
    /*Appends each data-filled `<li>` tag to a `<ul>` tag.*/
    $("<ul>", {
      "class": "data",
      html: list.join("")
    }).appendTo("#dataContainer");
});

但是，我想存储具有更精确信息的数据，显示大概的赞成/反对比率，如下所示：

{
  "'JavaFX Simple Inventory Management App - Open source'": 
    {"upvotes": 44.0, "downvotes": 7.0}, 

  "'Creating Formula Dependency Maps from Excel Spreadsheets'": 
    {"upvotes": 3.0, "downvotes": 1.0}, 

  "'CVE-2017-5645: Apache Log4j socket receiver deserialization vulnerability'": 
    {"upvotes": 12.0, "downvotes": 1.0}
}

我怎样才能遍历这些数据并正确显示它？

Answer 1

现在帖子的标题用作帖子数据对象的对象键。从技术上讲，这意味着如果任何帖子具有相同的名称，则数据将被最后添加的帖子覆盖。

从长远来看，如果您可以将 JSON 重构得更像：

{
    "title": "TITLE OF THE POST",
    "upvotes": SOME NUMBER,
    "downvotes": SOME NUMBER
}

并有一个包含帖子信息的对象数组，其中包含标题、赞成票和反对票（以及您要添加的任何其他内容）的自己的属性。然后，您将遍历数组并获取对象并访问以下属性：

var json = [
    {
        "title": "Some title",
        "downvotes": 100,
        "upvotes": 50
    },
    {
        "title": "Another title",
        "downvotes": 500,
        "upvotes": 40
    }
];

var obj;
for (var i=0; i<json.length; i++) {
  obj = json[i];
  console.log(obj.title);
  console.log(obj.downvotes);
  console.log(obj.upvotes);
}

如果出于某种原因，您真的必须按照他们的方式保留它，您可以这样做：

var title;
var downvotes;
var upvotes;

for (var key in json) {
  var title = key;
  var downvotes = json[key].downvotes;
  var upvotes = json[key];
}

这与将属性名称添加到 $.each 中的 val 基本相同。所以，val.downvotes 和 val.upvotes。