how to use data that we get from jquery, then use it in var with for loop?

Question

how to use data and use for loop inside variable? I want to use for loop inside variable to give data to variable so the data will be given to multidimensional array inside it

I have code like this :

window.onload = function () {

var nape = ["per a", "per b"];
var dp = [{'x':3,'y':5}];
var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    title:{
        text: "Server Performance"
    },
    axisX: {
        title:"Server Load (in TPS)"
    },
    axisY:{
  labelFormatter: function(e){
    if(e.value==0){
          a="Provinsi"        
                return  a;
        }else if(e.value==1){
         a="Aceh"       
                return  a;
        }else if(e.value==2){
          a="Maluku"       
                return  a;
        }else if(e.value==3){
          a="NTT"       
                return  a;
        }else if(e.value==4){
          a="NTB"       
                return  a;
        }else if(e.value==5){
          a="Jakarta"       
                return  a;
        }else if(e.value==6){
          a="Sumatera"       
                return  a;
        }else if(e.value==7){
          a="Kalimantan"       
                return  a;
        }
  },      
        title: "Response Time (in ms)",
    interval: 1,    
    },
    data: [{
        "type": "scatter",
        toolTipContent: "<span>{name}</span><br/> Load: {x} TPS<br/> Response Time:</span> {y} ms",
        name: nape[0],
        showInLegend: true,
        dataPoints: [
            { x: 23, y: 1 },
            { x: 28, y: 2 },
            { x: 39, y: 3 },
            { x: 34, y: 4 },
            { x: 24, y: 5 },
            { x: 29, y: 6 },
            { x: 29, y: 1 },
            { x: 23, y: 2 },
            { x: 27, y: 3 },
            { x: 34, y: 4 },
            { x: 36, y: 5 },
            { x: 33, y: 6 },
            { x: 32, y: 1 },
            { x: 21, y: 2 }
        ]
    },
    {
        type: "scatter",
        name: nape[1],
        showInLegend: true, 
        toolTipContent: "<span style=\"color:#C0504E \"><b>{name}</b></span><br/><b> Load:</b> {x} TPS<br/><b> Response Time:</b></span> {y} ms",
        dataPoints: dp
    }]
});
chart.render();

}

so what I want to do is get data from jquery then using for loop to post data to "data" inside var chart

...
$.ajax({
url: "the_url",
method: "GET",
success: function(data) {
var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    title:{
        text: "Server Performance"
    },
    axisX: {
        title:"Server Load (in TPS)"
    },
    axisY:{
  labelFormatter: function(e){
    if(e.value==0){
          a="Provinsi"        
                return  a;
        }else if(e.value==1){
         a="Aceh"       
                return  a;
        }else if(e.value==2){
          a="Maluku"       
                return  a;
        }else if(e.value==3){
          a="NTT"       
                return  a;
        }else if(e.value==4){
          a="NTB"       
                return  a;
        }else if(e.value==5){
          a="Jakarta"       
                return  a;
        }else if(e.value==6){
          a="Sumatera"       
                return  a;
        }else if(e.value==7){
          a="Kalimantan"       
                return  a;
        }
  },      
        title: "Response Time (in ms)",
    interval: 1,    
    },
data: for(var i=0; i < data.length ; i++){
        "type": "scatter",
        toolTipContent: "<span>{name}</span><br/> Load: {x} TPS<br/> Response Time:</span> {y} ms",
        name: data[i].somedata,
        showInLegend: false,
        dataPoints: data[i].anothersomedata
    }
...

so in "data :" there will be return value like this

...
[{
        type: "scatter",
        toolTipContent: "<span style=\"color:#4F81BC \"><b>{name}</b></span><br/><b> Load:</b> {x} TPS<br/><b> Response Time:</b></span> {y} ms",
        name: "Server Pluto",
        showInLegend: false,
        dataPoints: [
            { x: 23, y: 1 },
            { x: 28, y: 2 },
            { x: 39, y: 3 },
            { x: 34, y: 4 },
            { x: 24, y: 5 },
            { x: 29, y: 6 },
            { x: 29, y: 1 },
            { x: 23, y: 2 },
            { x: 27, y: 3 },
            { x: 34, y: 4 },
            { x: 36, y: 5 },
            { x: 33, y: 6 },
            { x: 32, y: 1 },
            { x: 21, y: 2 }
        ]
    },
    {
        type: "scatter",
        name: "Server Mars",
        showInLegend: false, 
        toolTipContent: "<span style=\"color:#C0504E \"><b>{name}</b></span><br/><b> Load:</b> {x} TPS<br/><b> Response Time:</b></span> {y} ms",
        dataPoints: [
            { x: 200, y: 3 },
            { x: 27, y: 4 },
            { x: 35, y: 5 },
            { x: 32, y: 6 },
            { x: 29, y: 1 },
            { x: 22, y: 2 },
            { x: 27, y: 3 },
            { x: 26, y: 4 },
            { x: 24, y: 5 },
            { x: 33, y: 6 },
            { x: 34, y: 1 },
            { x: 30, y: 2 },
            { x: 37, y: 3 },
            { x: 24, y: 4 }
        ]
    }]
...

looped, I have try several ways but seems alas, is there anyone can help me please?

Answer 1

One way is to write a function and pass the data you intend to insert to your object. Inside the function, add required fields and return the array.

var sampleData = [{
  name: 'Jon'
}, {
  name: 'Bob'
}]

var result = [{
  data: processData(sampleData)
}];

function processData(data) {
  let tmp = [];

  data.forEach(e => {
    tmp.push({
      "type": "scatter",
      toolTipContent: "<span>{name}</span><br/> Load: {x} TPS<br/> Response Time:</span> {y} ms",
      name: e.name,
    })
  });

  return tmp;
}

console.log(result);

Second way is to use an IIFE declaration as below

var sampleData = [{
  name: 'Jon'
}, {
  name: 'Bob'
}]

var result = [{
  data: (function(data) {
    let tmp = [];

    data.forEach(e => {
      tmp.push({
        "type": "scatter",
        toolTipContent: "<span>{name}</span><br/> Load: {x} TPS<br/> Response Time:</span> {y} ms",
        name: e.name,
      })
    });

    return tmp;
  })(sampleData)
}];

console.log(result);