时间戳

首页 > 解决方案 > Javascript - 如何将 json 解析为两个列表

javascript - Javascript - 如何将 json 解析为两个列表

问题描述

我正在尝试使用 chaert.js，并且正在使用 ajax 来获取 json 数据。我的 Json 文件如下所示：

[
    {
        "timestamp": "00:00:00.000000",
        "true_count": 0
    },
    {
        "timestamp": "01:00:00.000000",
        "true_count": 0
    },
    {
        ...
    }
]

我需要将时间戳记到我的 _label 变量中，并且我需要将 true_count 到我的 _data 变量中。这是我到目前为止所尝试的：

   $(document).ready(function(){
   var _data =[];
   var _labels = [];
   $.ajax({
   url: "chart_data",
   type: "get",
   success: function(response) {
     full_data = JSON.parse(response);
    full_data.forEach(function(key,index){
        _data = key.true_count;
        _labels= key.timestamp;
        
    });
     //_data = [full_data['true_count']];
     //_labels = [full_data['timestamp']];
   },

 });
});

我没有收到任何错误，但我的图表没有显示数据。我很确定我没有正确解析数据。你能告诉我我在做什么错吗？

正如我所提到的，我只需要 _data 来存储所有 true_count 和 _labels 来存储所有时间戳。

谢谢

所以这是我的代码的完整版本以及您建议的更新。由于某种原因，我的图表没有显示数据，实际上似乎只显示了第一条记录，即 00:00:000 和 0 true_count。

 /* chart.js chart examples */

$(document).ready(function(){
   var _data =[];
   var _labels = [];
  $.ajax({
   url: "chart_data",
   type: "get",
   success: function(response) {
     full_data = JSON.parse(response);
     full_data.forEach(function(key,index) {
     _data.push(key.true_count);
     _labels.push(key.timestamp);    
 });
     //_data = [full_data['true_count']];
     //_labels = [full_data['timestamp']];
   },

 });

// chart colors
var colors = ['#007bff','#28a745','#333333','#c3e6cb','#dc3545','#6c757d'];

/* large line chart */
var chLine = document.getElementById("chLine");
var chartData = {
  labels:_labels,
  datasets: [
  {
    data:_data,
    backgroundColor: [
                          'rgba(42, 157, 244, 0.1)'
                      ],
                      borderColor: [
                          'rgba(42, 157, 244, 1)',
                          'rgba(33, 145, 81, 0.2)',
                      ],
                      borderWidth: 1
  }]
};

if (chLine) {
  new Chart(chLine, {
  type: 'line',
  data: chartData,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: false
        }
      }]
    },
    legend: {
      display: false
    }
  }
  });
}
;
});

标签： javascriptjson

解决方案

你实际上就快到了。问题是您当前的版本只是重新分配了变量：

full_data.forEach(function(key,index) {
    _data = key.true_count;
    _labels= key.timestamp;    
});

结果是你最终只得到最后一个值，因为你不断地替换以前的值。您想要实现的是将每个元素添加到您的列表中：

full_data.forEach(function(key,index) {
    _data.push(key.true_count);
    _labels.push(key.timestamp);    
});

推荐阅读