将数据添加到动态创建的Chart.js数据集中

I feel like I'm very close but I can't seem to get the last bit right. I'm trying to create a line chart in Chart.js with dynamic datasets from a JSON file.

我觉得我很亲密，但我似乎无法得到最后一点。我正在尝试使用来自JSON文件的动态数据集在Chart.js中创建折线图。

My JSON is as following:

我的JSON如下：

{
  "source":"Google Trends",
  "keywords":
  [
    {
      "value":"Keyword 1",
      "data":
      [
        {
          "month":"Dec",
          "popularity":"10"
        },
        {
          "month":"Jan",
          "popularity":"35"
        }
      ]
    },
    {
      "value":"Keyword 2",
      data:
      [
        ...
      ]
    }
  ]
}

Then I have the following jQuery:

然后我有以下jQuery：

var source = "Google Trends";
var trendDataset = [];
var trendData = [];

$.each(jsonFile, function(index, trends) {
  if (trends.source === source) {
    $.each(trends.keywords, function(index, keyword) {

      trendDataset[index] = {
        label: keyword.value,
        data: trendData,
        borderWidth: 1,
        backgroundColor: randomColor(),
        lineTension: 0
      }

    });
  }
});

This is working fine, it's creating a new dataset for each keyword that is in the JSON file. But I'm having trouble filling those datasets.

这工作正常，它为JSON文件中的每个关键字创建一个新数据集。但是我在填写这些数据集时遇到了麻烦。

I'm trying to pass it a data array (trendData[]) which is filled with the popularity data for each keyword. I know I need to loop through the data array of each keyword, so I added this $.each loop in the existing loop:

我正在尝试传递一个数据数组（trendData []），其中填充了每个关键字的流行度数据。我知道我需要遍历每个关键字的数据数组，所以我在现有循环中添加了这个$ .each循环：

$.each(keyword.data, function(index, data) {
  trendData.push(data.popularity);
});

Creating this in total:

总共创建这个：

$.each(jsonFile, function(index, trends) {
  if (trends.source === source) {
    $.each(trends.keywords, function(index, keyword) {

      trendDataset[index] = {
        label: keyword.value,
        data: trendData,
        borderWidth: 1,
        backgroundColor: randomColor(),
        lineTension: 0
      }

      $.each(keyword.data, function(index, data) {
        trendData.push(data.popularity);
      });

    });
  }
});

Obviously, this is adding all the popularity data from all keywords, creating one big trendData[]. Replacing trendData.push(data.popularity) with trendData[index] = data.popularity does the right thing, but again, obviously only for the last keyword since it keeps on getting overwritten.

显然，这是添加所有关键字的所有流行度数据，创建一个大的trendData []。用trendData [index] = data.popularity替换trendData.push（data.popularity）做了正确的事情，但同样，显然只针对最后一个关键字，因为它一直被覆盖。

How can I create a seperate trendData[] for each trendDataset[]?

如何为每个trendDataset []创建单独的trendData []？

I guess I need something like this in the second $.each:

我想在第二个$ .each中我需要这样的东西：

$.each(keyword.data, function(index, data) {
  trendData[index] = data.popularity;
  trendDataset[index].push(trendData);
});

This however gives me an error: trendDataset[index].push is not a function

但是这给了我一个错误：trendDataset [index] .push不是一个函数

edit: Walking through it step by step, it makes sense that this doesn't work. It loops through the first array once, creating the first dataset. Then it loops through the 2nd array three times, and then that pattern repeats itself.

编辑：一步一步地走过它，这是不合理的。它循环遍历第一个数组，创建第一个数据集。然后它循环通过第二个数组三次，然后该模式重复。

I somehow need to be able to access the 2nd array's property, in the first array, like so:

我不知何故需要能够在第一个数组中访问第二个数组的属性，如下所示：

trendDataset[index] = {
  data: trendData.data.popularity
}

But how..?

但是如何..？

edit2: The more I'm trying to find a solution, the more clueless I'm getting. Whenever I console.log trendData after setting it like this:

edit2：我越想找到解决方案，我就越无能为力。每当我将console.log trendData设置为这样之后：

$.each(keyword.data, function(index, data) {
  trendData[index] = data.popularity;
});

console.log(trendData);

It shows the object with the correct values 3 times, but upon opening it's only showing me the values of the last iteration???

它显示具有正确值3次的对象，但在打开时它只显示最后一次迭代的值???

Screenshot

截图

1 个解决方案

#1

I finally figured it out. It was much easier then I thought and I have no idea why I didn't figure this out sooner..

我终于弄明白了。这比我想象的容易得多，我不知道为什么我不早点弄清楚这一点。

Simply create seperate arrays within the first $.each loop and set the values..

只需在第一个$ .each循环中创建单独的数组并设置值。

var trendDataset = [];

$.each(trends.keywords, function(index, keyword) {
  // Create an Array for each data object
  trendData = [];
  trendLabels = [];
    $.each(keyword.data, function(index, data) {
      trendLabels[index] = data.month,
      trendData[index] = data.popularity
    });  
  // Push the array with data to another array
  trendDataset[index].data = trendData;
});

#1