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]

            }]

    }
})

This is confusing. Not sure what you are trying to do still. Can you clarify this further with a better explanation. — Dan Zuzevich
– Dan Zuzevich, Commented Aug 22, 2017 at 12:32
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 — Javasharp
– Javasharp, Commented Aug 22, 2017 at 12:50

Jonas Wilms · Accepted Answer · 2017-08-22 12:56:36Z

2

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

edited Aug 22, 2017 at 12:56

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

answered Aug 22, 2017 at 12:50

jonahe

5,0101 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jonahe Over a year ago

@Jonasw Thanks. I like your edit. More concise and factual. :)

Javasharp Over a year ago

hi says theres a syntax error unexpcted [ near this line dataSetsWithData[0],

jonahe Over a year ago

@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 Over a year ago

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

Jonas Wilms · Accepted Answer · 2017-08-22 12:57:53Z

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

Chandrakant Thakkar · Accepted Answer · 2017-08-22 13:33:23Z

1

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
                   }

edited Aug 22, 2017 at 13:33

answered Aug 22, 2017 at 12:38

Chandrakant Thakkar

9789 silver badges23 bronze badges

1 Comment

Javasharp Over a year ago

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.

Collectives™ on Stack Overflow

JavaScript loop/array

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related