将JSON数据从字符串转换为Chart.js数组

时间:2018-06-10 20:41:44

标签: javascript arrays json chart.js

我从存储为Javascript变量的JSON文件中提取数据:

var jsonFile = {
  "profiles": [{
      "time": 0,
      "conc": 0.15,
      "fitted": 0.1,
      "non": 0,
      "prior": 30,
      "missed": 2.9,
      "wrong": 2.9,
      "mix": 0.15,
      "temp": 0.015,
      "gel": 0.03,
      "data": 4
    },
    {
      "time": 1,
      "conc": 11,
      "fitted": 10,
      "non": 5,
      "prior": 35,
      "missed": 2.35,
      "wrong": 25,
      "mix": 11,
      "temp": 1.1,
      "gel": 2.2,
      "data": 4
    },
    {...}
  }];

我使用map()方法拉取图表中特定行所需的数据对:

var dataPairs = jsonFile.profiles.map(function(e) { return '{x:' + e.time + ', y:' + e.fitted + '}'; });

然后我尝试将其格式化为Chart.js所需的数组

var dataPairs2 = '[' + dataPairs + ']';

因此,对于图表data行,我会致电dataPairs2。看了console.log(dataPairs2)之后,我意识到它并没有被视为一个阵列。 dataPairs 和数组,但每个条目都是一个字符串,因此对data行调用它也不起作用。

所以,我正在试图弄清楚如何将dataPairs2转换为数组。 JSON.Parse()似乎不起作用,因为它不是标准格式(我猜),我不认为我可以使用逗号作为分隔符的split(),因为每个数组条目都包含一个逗号

2 个答案:

答案 0 :(得分:1)

只需在第一次调用map时以这种方式格式化它们。而不是使用map来生成stings数组,而是使用它来生成对象数组。

jsonFile.profiles.map(v => ({ x: v.time, y: v.fitted }) );



var jsonFile = {
  "profiles": [
    { "time": 0, "conc": 0.15, "fitted": 0.1, "non": 0, "prior": 30, "missed": 2.9, "wrong": 2.9, "mix": 0.15, "temp": 0.015, "gel": 0.03, "data": 4 },
    { "time": 1, "conc": 11, "fitted": 10, "non": 5, "prior": 35, "missed": 2.35, "wrong": 25, "mix": 11, "temp": 1.1, "gel": 2.2, "data": 4 }
]};

const d = jsonFile.profiles.map(v => ({ x: v.time, y: v.fitted }) );

console.log(d);




答案 1 :(得分:1)

我不确定您是否正在寻找,但您只需返回Object而不是String。因此返回:

{x: e.time, y: e.fitted}

而不是:

'{x:' + e.time + ', y:' + e.fitted + '}'

在你的地图中。

以下是代码:



const jsonFile = {profiles:[{time:0,conc:.15,fitted:.1,non:0,prior:30,missed:2.9,wrong:2.9,mix:.15,temp:.015,gel:.03,data:4},{time:1,conc:11,fitted:10,non:5,prior:35,missed:2.35,wrong:25,mix:11,temp:1.1,gel:2.2,data:4}]};


const dataPairs = jsonFile.profiles.map(e => ({x: e.time, y: e.fitted}) )

console.log(dataPairs)