JavaScript loop/array

Question

I have the simple javascript code below which I'm initializing from a JSON Array Object using SimpleJSON java API how do I set data=dataSets[i] inside of a loop rather than hardcoding it?

var scatterChart = new Chart(ctx, {
 type: 'scatter',
 data: {
 datasets: [
 {
 borderColor: window.chartColors.red,
 backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
 label: 'Sample1',
 data: dataSets[0]
 },
 {
 data: dataSets[1]
 },
 {
 borderColor: window.chartColors.blue,
 backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
 data: dataSets[2]
 },
 {
 data: dataSets[3]
 }, {
 data: dataSets[4]
 }, {
 data: dataSets[5]
 }, {
 data: dataSets[6]
 }, {
 data: dataSets[7]
 }, {
 data: dataSets[8]
 }, {
 data: dataSets[9]
 }, {
 data: dataSets[10]
 }]
 }
})

• Dan Zuzevich: This is confusing. Not sure what you are trying to do still. Can you clarify this further with a better explanation.
• Javasharp: Hi daniel basically have a forloop to initialize the data in a chart so if I had 30000 samples I wouldent have to do data[3000] manually

Answer 1

You could also map the dataSets to an array of objects with the dataSet being the data property, then you could extend the first and the third with some extra properties:

// transform the datasets (from the api?) to the structure that you want
var dataSetsWithData = dataSets
 .map(dataSet => ({ data: dataSet})) ; 
 // you now have an array of objects 
// manually add the extra properties for the ones you're intresed in
dataSetsWithData[0] = {
 // keep the original properties, in this case just "data"
 ...dataSetsWithData[0],
 // additional properties for this particular index
 borderColor : window.chartColors.red,
 backgroundColor : color(window.chartColors.red)
 .alpha(0.2).rgbString(),
 label : 'Sample1'
};
dataSetsWithData[2] = {
 // keep the original properties, in this case just "data"
 ...dataSetsWithData[0],
 // additional properties for this particular index
 borderColor : window.chartColors.blue,
 backgroundColor : color(window.chartColors.blue).alpha(0.2).rgbString(),
};
var scatterChart = new Chart(ctx, {
 type : 'scatter',
 data : {
 datasets : dataSetsWithData
 }
});

• jonahe: @Jonasw Thanks. I like your edit. More concise and factual. :)
• Javasharp: hi says theres a syntax error unexpcted [ near this line dataSetsWithData[0],
• jonahe: @Javasharp. I can't replicate the error. It's possible the error is because I use new ES6 features. It works here jsfiddle.net/jonahe/63g3xfyg (I had to create some fake functions and data, and uncomment some code). Maybe try replacing the line ...dataSetsWithData[0] with data: dataSetsWithData[0].data and the same for ...dataSetsWithData[1], and see if that helps.
• Javasharp: Thank you I'm sure this is correct I will learn javascript and comeback to this otherwise the struggle is real wasnt expecting to need javascript so much for a spring webapp

Answer 2

You could set up your array without the data property (lets call it settings):

var settings = [
 {
 borderColor : window.chartColors.red,
 backgroundColor : color(window.chartColors.red)
 .alpha(0.2).rgbString(),
 label : 'Sample1'
 },
 null,
 {
 borderColor : window.chartColors.blue,
 backgroundColor : color(window.chartColors.blue)
 .alpha(0.2).rgbString(), 
 }
];

Then we take dataSets and extend it with our settings:

var datasets = dataSets.map((data,i) => {
 ...(settings[i] || {}),
 data
});

The upper code is ESnext so you might use this instead:

var datasets = dataSets.map(function(data,i){
 return Object.assign({data:data},settings[i]);
});

Then we can draw the graph:

var scatterChart = new Chart(ctx, {
 type : 'scatter',
 data : { datasets }
});

Answer 3

you can write down as following using forEach

var dataArray=[];
dataSets.forEach(function(d,i){
 var tempObj={};
 tempObj["data"]=d;
 if(i==0){
 tempObj["borderColor"] = window.chartColors.red;
 tempObj["backgroundColor"] = 
 color(window.chartColors.red).alpha(0.2).rgbString();
 tempObj["label"] = 'Sample1';
 }else if(i==2){
 tempObj["borderColor"] = window.chartColors.blue;
 tempObj["backgroundColor"] = 
 color(window.chartColors.blue).alpha(0.2).rgbString();
 }
 dataArray.push(tempObj);
});
var scatterChart = new Chart(ctx, {
 type : 'scatter',
 data : {
 datasets :dataArray
 }

if you wan to use for loop then,

var dataArray=[];
for(i=0;i<dataSets.length;i++){
 var tempObj={};
 tempObj["data"]=dataSets[i];
 if(i==0){
 tempObj["borderColor"] = window.chartColors.red;
 tempObj["backgroundColor"] = 
 color(window.chartColors.red).alpha(0.2).rgbString();
 tempObj["label"] = 'Sample1';
 }else if(i==2){
 tempObj["borderColor"] = window.chartColors.blue;
 tempObj["backgroundColor"] = 
 color(window.chartColors.blue).alpha(0.2).rgbString();
 }
 dataArray.push(tempObj);
}
var scatterChart = new Chart(ctx, {
 type : 'scatter',
 data : {
 datasets :dataArray
 }

• Javasharp: Hi thankyou if I passed some more json arrays with the labels and colors can you do this with just a for loop something like for(int i=0;I<dataArray.length() i++) .I dont normally use javascript.