Question

我创建了一个Reddit bot，用于跟踪特定时间段内给定帖子的信息。我将该数据映射到名为Chart.js的库。

信息存储在JSON文件中。以下是包含两个帖子的文件示例：

[
    {"time_scraped": ["2017-04-24 19:12:30", "2017-04-24 19:13:01", "2017-04-24 19:13:23"],
    "title": "Le Pen 'steps aside' as party leader",
    "downvotes": 0.0,
    "subreddit": "news",
    "post_id": "67b8ex",
    "vote": "up",
    "upvotes": [2.0, 2.0, 2.0, 2.0, 2.0]},

    {"time_scraped": ["2017-04-24 19:12:30", "2017-04-24 19:13:01", "2017-04-24 19:13:23"],
    "title": "10 Astronomical Events That Will Happen In Your Lifetime",
    "downvotes": 0.0,
    "subreddit": "videos",
    "post_id": "67b89w",
    "vote": "up",
    "upvotes": [2.0]}
]

一个非常标准的JSON设置！

现在，我正在使用一些jQuery从这个JSON文件中提取数据并将其输入到DOM中。该代码减去创建图形的部分，如下所示：

$.getJSON("./graph.json", function(json) {
    var list = [];
    var obj;
    for (var i=0; i<json.length; i++) {
        obj = json[i]
        var name = "dataChart" + obj.post_id;
        var containerName = "graphContainer" + obj.post_id;
        $(".graphs").append("<div id='"+containerName+"'></div>");
        containerName = "#"+containerName;
        $(containerName).append("<canvas id='"+name+"'></canvas>");
        var ctx = document.getElementById(name);
        var dataChart = new Chart(ctx, {
            /*
                Create a graph...
            */
        });
    }
});

Create a graph...部分只包含有关图表类型，点位置等的一些数据 - 主要是选项配置，如果需要，我可以显示。我觉得这个帖子并不重要。

问题出现在jQuery代码上。它将循环通过直到最后一个帖子。例如，在上面的两个帖子中，它将为第一个帖子创建一个容器div和一个canvas元素，并显示正常。但是，每当它到达最后一个数组时，它只会创建容器div，而不是它内部的canvas。任何数量的图都是这种情况。如果我的主JSON数组中有20个包含帖子数据的数组，它将创建20个容器div并且只创建19个canvas。

我是否错误地循环了数据？

也许现在对我来说还为时尚早，但我不能为我的生活弄清楚为什么它不能显示最后一个索引。

Answer 1

这是一个如何迭代数组并为每个项附加多个元素的简单示例

＆＃13;

const data = [1, 2, 3, 4, 5]

const $graphs = $(".graphs");

data.forEach(d => {
  const $container = $(`<div class="container" id="${d}"><div class="canvas" id="${d}">I'm the ${d} canvas</div></div>`)

  $graphs.append($container)
})

＆＃13;

.container {
  background: orange;
  padding: 5px;
  margin: 10px;
}
.canvas {
  background: lightgray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graphs" />

＆＃13;

Answer 2

您现有的代码似乎确实在每个div中创建了一个画布，至少提供了JSON（假设Chart.js不是以某种方式搞乱）。

对于它的价值，你可以通过跟踪你创建的元素而不是将它们放在文档中来节省一些DOM遍历（以及许多可能不必要的元素ID）立即通过他们的ID再次查找它们：

＆＃13;

var theJSON = [{
    "time_scraped": ["2017-04-24 19:12:30", "2017-04-24 19:13:01", "2017-04-24 19:13:23"],
    "title": "Le Pen 'steps aside' as party leader",
    "downvotes": 0.0,
    "subreddit": "news",
    "post_id": "67b8ex",
    "vote": "up",
    "upvotes": [2.0, 2.0, 2.0, 2.0, 2.0]
  },

  {
    "time_scraped": ["2017-04-24 19:12:30", "2017-04-24 19:13:01", "2017-04-24 19:13:23"],
    "title": "10 Astronomical Events That Will Happen In Your Lifetime",
    "downvotes": 0.0,
    "subreddit": "videos",
    "post_id": "67b89w",
    "vote": "up",
    "upvotes": [2.0]
  }
];

//inlining the JSON for demo:
var theFunction = function(json) {
  for (var i = 0; i < json.length; i++) {
    // "container" contains the DOM node to be appended to  .graphs:
    var container = $("<div id='graphContainer" + json[i].post_id + "'></div>")
      .appendTo($(".graphs"));
    // Now ctx can be appended directly to container, without a DOM lookup:
    var ctx = $("<canvas id='dataChart" + json[i].post_id + "'></canvas>")
      .appendTo(container);
    // and your chart can work directly with ctx, again with no DOM lookup required:
    /*
    var dataChart = new Chart(ctx, { ... });
    */
  }
};

theFunction(theJSON);

＆＃13;

/* Borders added so you can see what it's doing */
div {
  border: 2px solid #000
}

canvas {
  border: 2px solid #F00
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="graphs"></div>

＆＃13;

能够从JSON文件中提取除最后一个索引以外的所有索引吗？

2 个答案: