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

标签 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()使用逗号作为分隔符,因为每个数组条目都包含一个逗号。

最佳答案

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

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

关于javascript - 将 JSON 数据从字符串转换为 Chart.js 数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50787865/

相关文章:

javascript - 如何使用本地存储设置缓存

ruby-on-rails - rails : how to set json format for redirect_to

c# - JsonConvert.DeserializeObject 的 JSON.net 问题

php - codeigniter 返回从 Controller 获取数据以通过 Ajax 请求查看

javascript - Vue.js:如何访问 vm-router 创建的 vm 对象?

javascript - 必须是类的参数的 FlowType 注释

javascript - 根据 startTime 和 endTime 对数组进行排序

jQuery(JS?)如何根据数组中的值过滤元素

java - 如何从给定宽度和高度的有序一维列表 - 0,1,2,3,4,5,6.... 获取二维坐标(x,y)?

javascript - Android Canvas 卡住