Add data to dynamically created Chart.js dataset

Question

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.

My JSON is as following:

{
 "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:

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.

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:

$.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.

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

I guess I need something like this in the second $.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

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:

$.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???

Screenshot

Answer 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..

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;
});