CODEWITHSUNDEEP
javascriptjsonajax
user2896120
user2896120

Reputation: 3282

Unexpected token u in JSON

I have an Ajax function that sends and retrieves a string. Once the Ajax receives the string, it calls a function called drawChart. drawChart then converts that string into an array using JSON.parse I am also using Google Charts to create a chart using the data that was passed in. Everything is working correctly. The chart is being made and it looks all fine, however; I am getting this error in the console:

Uncaught (in promise) SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse () at drawChart (index.js?c1496931740:24) at anonymous

I did research this error and it happens when the data type that is being passed in JSON.parse is undefined. I tried to use console.log(typeof(data)) to check if it really is undefined, but it outputs 2 things. First it outputs string, then outputs undefined. Afterwards, it displays the error, but the chart gets displayed successfully. Here's my code:

function aggregator(field, size) {
    /*Build jSON query string*/
    var jString = '{"aggs": { "group_by_date": { "terms": { "field": "' + field + '", "size" : ' + size + '} } } }';

    google.charts.setOnLoadCallback(drawChart);   /*Load Chart*/

    /*Sending and retrieving data using Ajax*/
    $.ajax({
        url: 'index.php',
        type: 'post',
        datatype: 'json',
        data: {
            qSet: jString,
            size: size
        },
        success: drawChart
    });
}

var drawChart = function(data)
{   
    console.log(typeof(data));
    data = JSON.parse(data);  /*Convert the data back into an array*/

    var chartData = new google.visualization.DataTable();  /*Set up the chart*/

    chartData.addColumn('string', 'year'); 
    chartData.addColumn('number', 'Records');

    /*For loop to add rows*/
    for (var i = 0; i < data.length; ++i){
        chartData.addRow(data[i]);
    }

    var options = {
        title: 'Arrival Data'
    };

    var chart = new google.visualization.BarChart(document.getElementById('chartContainer'));
    chart.draw(chartData, options);
};

What is the reason for this error? Why do I receive 2 outputs (string and then undefined) when I do console.log(typeof(data))? How can I fix it?

Upvotes: 0

Views: 1472

Answers (1)

Quentin
Quentin

Reputation: 943217

Why do I receive 2 outputs (string and then undefined) when I do console.log(typeof(data))?

Because you are calling the function twice.

  1. google.charts.setOnLoadCallback(drawChart);
  2. success: drawChart

Only call it when you get the data.

google.charts.setOnLoadCallback lets you specify a function to run when the API is available.

Create a new function which makes your Ajax request and call that when the API has loaded.

google.charts.setOnLoadCallback(sendAjaxRequest); /*Load Chart*/

function sendAjaxRequest() {

  $.ajax({
    url: 'index.php',
    type: 'post',
    datatype: 'json',
    data: {
      qSet: jString,
      size: size
    },
    success: drawChart
  });
}

Upvotes: 1

Related Questions