JSON 来自 yahoo financial API SyntaxError when is given as parameter to google chart table

JSON from yahoo financial API SyntaxError when is given as parameter to google chart table

我使用 yahoo financial API 从中获取数据,然后我想在 google 图表中输入数据,但 JSON 似乎有问题目的。因此,我尝试了所有阅读的内容,但不幸的是仍然没有成功。
错误

index.html:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse () at drawChart (main.js:18) at Object.google.a.c.Ac (loader.js:155) at Object.google.a.c.Pa (loader.js:155) at f (loader.js:152) at Object.google.l.m.kj (loader.js:229) at Object.google.l.m.ce (loader.js:229) at loader.js:228

JavaScript

google.charts.load('current', {
'packages': ['corechart']
});

google.charts.setOnLoadCallback(drawChart);

var options = {
    'title': 'Today is not my day',
    'width': 400,
    'height': 300
};

var input = getData();

function drawChart() {
    var chartData = google.visualization.arrayToDataTable(JSON.parse(input));
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(chartData, options);
};

function getData() {
   dataArray = [
    ['Name', 'Volume'],
  ];

  var BASE_URL = "https://query.yahooapis.com/v1/public/yql?q=";
  var yql_query = 'select * from yahoo.finance.quote where symbol in ("YHOO","AAPL","GOOG","MSFT")';
  var yql_query_str = encodeURI(BASE_URL + yql_query);
  var result = yql_query_str + "&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";

  $.getJSON(result, function(data){
    var object = data.query.results.quote;
    for (var i = 0; i < object.length; i++) {
      var currentObj = object[i];
      var pushedArray = [currentObj.Name, parseFloat(currentObj.Volume)];
      dataArray[i+1] = pushedArray;
    }
    return dataArray;
  });
};

HTML

<html>
  <head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- <script type="text/javascript" src="js/request.js"></script> -->
    <script type="text/javascript" src="js/main.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12" id="chart_div"></div>
      </div>
    </div>

    <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
</html>

正如上面所写,getData() 同步 returns undefined,所以在 drawChart() 内部,你实际上是在尝试 JSON.parse(undefined),这导致到您收到的 SyntaxErrorJSON.parse()undefined 转换为字符串 "undefined",这是无效的 JSON)。

dataArray 从回调中返回到 $.getJSON() 请求 returns 之后;目前无法在 drawChart() 函数内部访问它。

您需要重构代码,以便在 $getJSON() 请求返回后调用 drawChart(),因此它可以通过词法或闭包访问 dataArray