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中提取数据，并使用google visualization 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>

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

1 个答案: