CODEWITHSUNDEEP
javascriptarrays
Javasharp
Javasharp

Reputation: 51

JavaScript loop/array

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]

            }]

    }
})

Upvotes: 2

Views: 91

Answers (3)

Chandrakant Thakkar
Chandrakant Thakkar

Reputation: 978

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
                   }

Upvotes: 1

Jonas Wilms
Jonas Wilms

Reputation: 138237

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

Upvotes: 2

jonahe
jonahe

Reputation: 5000

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

Upvotes: 2

Related Questions