как использовать данные, которые мы получаем из jquery, а затем использовать их в var с для l oop?

Question

как использовать данные и использовать для l oop внутри переменной? Я хочу использовать для l oop внутри переменной, чтобы дать данные переменной, так что данные будут переданы в многомерный массив внутри него

У меня есть такой код:

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

}

и что Я хочу сделать, это получить данные из jquery, а затем использовать для l oop для отправки данных в «данные» внутри диаграммы var

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

, поэтому в «data:» будет возвращаемое значение, подобное этому

...
[{
        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 }
        ]
    }]
...

зациклен, я пробовал несколько способов, но, кажется, увы, кто-нибудь может мне помочь, пожалуйста?

Answer 1

Один из способов - написать функцию и передать данные, которые вы собираетесь вставить, в ваш объект. Внутри функции добавьте обязательные поля и верните массив.

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

Второй способ заключается в использовании декларации IIFE, как показано ниже

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