javascript - 使用 javascript 从嵌套 json 文件中提取数据

Question

我被这个问题困扰了。我有下面的嵌套 json。

{
  "current": {
    "timeSeries": [
      {
        "results": [
          {
            "count": 426
          }
        ],
        "beginTimeSeconds": 1490928320,
        "endTimeSeconds": 1490930120,
        "inspectedCount": 426
      },
      {
        "results": [
          {
            "count": 510
          }
        ],
        "beginTimeSeconds": 1490930120,
        "endTimeSeconds": 1490931920,
        "inspectedCount": 510
      }
    ]
  },
  "previous": {
    "timeSeries": [
      {
        "results": [
          {
            "count": 426
          }
        ],
        "beginTimeSeconds": 1490928320,
        "endTimeSeconds": 1490930120,
        "inspectedCount": 426
      },
      {
        "results": [
          {
            "count": 510
          }
        ],
        "beginTimeSeconds": 1490930120,
        "endTimeSeconds": 1490931920,
        "inspectedCount": 510
      }
    ]
  }
}

我正在尝试从上面的 json 中提取数据并使用谷歌可视化 api 将其呈现在网页上。

我尝试过下面的js，但没有成功。

function drawChart() {
  var jsonData = $.ajax({
      url: "https://api.myjson.com/bins/bay0v",
      dataType: "json",
      async: false
      }).responseText;

   var options = {
      title : 'Sample json line chart',
      curveType : 'function',
    };

//var obj = JSON.parse(jsonData);
console.log(jsonData);
console.log(jsonData.current.timeSeries[0].beginTimeSeconds);

    var options = {
       hAxis: {
         title: 'Time',
         textStyle: {
           color: '#01579b',
           fontSize: 20,
           fontName: 'Arial',
           bold: true,
           italic: true
         },
         titleTextStyle: {
           color: '#01579b',
           fontSize: 16,
           fontName: 'Arial',
           bold: false,
           italic: true
         }
       },
       vAxis: {
         title: 'Popularity',
         textStyle: {
           color: '#1a237e',
           fontSize: 24,
           bold: true
         },
         titleTextStyle: {
           color: '#1a237e',
           fontSize: 24,
           bold: true
         }
       },
       colors: ['#a52714', '#097138']
     };

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {width: 1400, height: 360});
}

我在浏览器控制台中看到以下输出。

Uncaught TypeError: Cannot read property 'timeSeries' of undefined

有人可以帮我解决这个问题吗？

提前致谢。

Answer 1

console.log 的输出可能会产生误导，因为当您实际深入控制台提供的嵌套结构时，浏览器往往只会查看记录变量的内容。

这意味着您可能会误以为在进行 console.log 调用时嵌套数据已经存在，但这是完全无法保证的。

此外，async: false 选项已被弃用，因此 Ajax 调用很可能会忽略此设置并异步运行。

因此，重写您的代码以使用在响应可用时调用的回调函数，例如使用 .done()。另请注意，jQuery 提供了 $.getJSON 方法作为 Ajax 调用的快捷方式:

$.getJSON("https://api.myjson.com/bins/bay0v").done(function (jsonData) {
    console.log(jsonData.current.timeSeries[0].beginTimeSeconds);
    var options = {
        title : 'Sample json line chart',
        curveType : 'function',
    };
    // ...etc. Rest of your code comes here, or is called from here.
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>