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

Question

I use yahoo financial API to get data from it and then I want to input the data in google chart, but it seems that I have a problem with the JSON object. So, I tried everything which I read , but unfortunately still unsuccessful.
Error

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>

score 0 · Accepted Answer · answered Jun 05 '17 at 07:43

As it is written above, getData() synchronously returns undefined, so inside of drawChart() you're essentially trying to JSON.parse(undefined), which leads to the SyntaxError you received (JSON.parse() casts undefined to the string "undefined", which is invalid JSON).

dataArray is being returned from within the callback to $.getJSON() after the request returns; there is no way it could currently be accessible inside of the drawChart() function.

You need to refactor the code so that drawChart() is called after the $getJSON() request has returned, and so it has access to dataArray either lexically or through a closure.

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

1 Answers1