使用javascript從嵌套的json文件中提取數據

我被這個問題困住了。我有下面的嵌套json。使用javascript從嵌套的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

有人可以幫我解決這個問題嗎？

在此先感謝。

來源

2017-04-01 harshavmb

'異步：FALSE'已被棄用。您需要編寫一個（異步）回調。 – trincot

感謝@trincot，但是我沒有閱讀jsonData對象的問題。當我打印時，它打印整個json文件。你有什麼建議來編寫異步回調？ – harshavmb

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>

來源

2017-04-01 11:43:30 trincot

使用javascript從嵌套的json文件中提取數據

回答

相關問題