如何使用从jquery中获取的数据，然后在for循环中将其用于var中？

Question

如何使用数据并在变量内部使用for循环？我想在变量内部使用for循环将数据提供给变量，以便将数据提供给其中的多维数组]

我有这样的代码：

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获取数据，然后使用for循环将数据发布到var图表内的“ data”

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

所以在“数据：”中将有这样的返回值

...
[{
        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);