Error parsing JSON string using parseJSON

Question

Need some help if there is a problem with the code or the data itself. Although I suspect its with the code because I tried to validate the JSON data I received it is properly formatted...

Here is my JSON data

{"view":"cities","model":{"top10Cities":[{"id":1024,"name":"Mumbai (Bombay)","countrycode":"IND","district":"Maharashtra","population":"10500000"},{"id":2331,"name":"Seoul","countrycode":"KOR","district":"Seoul","population":"9981619"},{"id":206,"name":"São Paulo","countrycode":"BRA","district":"São Paulo","population":"9968485"},{"id":1890,"name":"Shanghai","countrycode":"CHN","district":"Shanghai","population":"9696300"},{"id":939,"name":"Jakarta","countrycode":"IDN","district":"Jakarta Raya","population":"9604900"},{"id":2822,"name":"Karachi","countrycode":"PAK","district":"Sindh","population":"9269265"},{"id":3357,"name":"Istanbul","countrycode":"TUR","district":"Istanbul","population":"8787958"},{"id":2515,"name":"Ciudad de México","countrycode":"MEX","district":"Distrito Federal","population":"8591309"},{"id":3580,"name":"Moscow","countrycode":"RUS","district":"Moscow (City)","population":"8389200"},{"id":3793,"name":"New York","countrycode":"USA","district":"New York","population":"8008278"}],"fusionCharts":{"chart":"{\"showValues\":\"0\",\"caption\":\"Cities by Country Code\",\"theme\":\"zune\"}","data":"[{\"label\":\"Mumbai (Bombay)\",\"value\":\"10500000\"},{\"label\":\"Seoul\",\"value\":\"9981619\"},{\"label\":\"São Paulo\",\"value\":\"9968485\"},{\"label\":\"Shanghai\",\"value\":\"9696300\"},{\"label\":\"Jakarta\",\"value\":\"9604900\"},{\"label\":\"Karachi\",\"value\":\"9269265\"},{\"label\":\"Istanbul\",\"value\":\"8787958\"},{\"label\":\"Ciudad de México\",\"value\":\"8591309\"},{\"label\":\"Moscow\",\"value\":\"8389200\"},{\"label\":\"New York\",\"value\":\"8008278\"}]"}},"cleared":false}

Here is the code I used to receive the JSON data

$(document).ready( function () {

    var jsonD = $.getJSON("http://localhost:8080/v1/cityData", function ( data ) {
        console.log("Success "+ data.toString());
        alert(data);

        $("#fChart").insertFusionCharts({
            type: "column2d",
            width: "450",
            height: "250",
            dateFormat: "JSONURL",
            dataSource: data
        });
    })

});

I tried the tips stated on this article but its still not working. Any advice on how to fix this? Thanks

Update 2

modified jquery code as suggested by Nisanth but the chart library is still not working. It says invalid data, maybe this is a problem with fusion charts library itself?

    $(document).ready( function () {

var jsonD = {};

        $.getJSON("http://localhost:8080/v1/cityData", function ( data ) {

            console.log("Success ");
            alert(data);
            jsonD = data;

        }).done( function () {

            var fcData = JSON.stringify(jsonD);
            console.log("fcData: "+fcData);
            $("#fChart").insertFusionCharts({
                type: "column2d",
                width: "450",
                height: "250",
                dateFormat: "JSON",
                dataSource: fcData
            });
        });     
    });

The code is working fine i've added a log inside .done function and it showed the value of fcData see below.

Changed fcData = jsonD.model.fusionCharts and received the error below.

Uncaught TypeError: b.match is not a function
    at Fb (fusioncharts.js:214)
    at constructor._drawCategory (fusioncharts.js:1263)
    at constructor._drawComponents (fusioncharts.js:1223)
    at constructor.draw (fusioncharts.js:1220)
    at k._drawAxis (fusioncharts.js:981)
    at k._updateVisuals (fusioncharts.js:976)
    at k.draw (fusioncharts.js:979)
    at k.init (fusioncharts.js:946)
    at Object.m.createChart (fusioncharts.js:875)
    at n.core.render (fusioncharts.js:1801)

Update 3

Code update

    }).done( function () {          
        var cfChart= jsonD.model.fusionCharts.chart;
        var cfData= jsonD.model.fusionCharts.chart;
        $("#fChart").insertFusionCharts({
             type: "column2d",
             width: "450",
             height: "250",
             dateFormat: "JSON",
            dataSource: {chart:cfChart,data:cfData}
         });
    });     
});

Error Log

Uncaught TypeError: b.match is not a function
    at Fb (fusioncharts.js:214)
    at constructor._drawCategory (fusioncharts.js:1263)
    at constructor._drawComponents (fusioncharts.js:1223)
    at constructor.draw (fusioncharts.js:1220)
    at k._drawAxis (fusioncharts.js:981)
    at k._updateVisuals (fusioncharts.js:976)
    at k.draw (fusioncharts.js:979)
    at k.init (fusioncharts.js:946)
    at Object.m.createChart (fusioncharts.js:875)
    at n.core.render (fusioncharts.js:1801)

Working code

$(document).ready( function () {

    var jsonD = {};

    $.getJSON("http://localhost:8080/v1/cityData", function ( data ) {

        console.log("Success ");
        //alert(data);
        jsonD = data;

    }).done( function () {

        var cfChart= JSON.parse(jsonD.model.fusionCharts.chart);
        var cfData= JSON.parse(jsonD.model.fusionCharts.data);
        $("#fChart").insertFusionCharts({
             type: "column2d",
             width: "450",
             height: "250",
             dateFormat: "JSON",
            dataSource: {chart:cfChart,data:cfData}
         });
    });     
});

The $.getJSON() function doesn't return the JSON string, it passes it to your callback function in the data argument. Call .insertFusioncharts() from inside the $.getJSON() callback, using data - noting that jQuery will have already parsed the JSON for you. — nnnnnn
– nnnnnn, Commented Apr 3, 2017 at 4:56
@nnnnnnn i still receive the same message "[object Object] " after I moved it inside $.getJSON check my update. — dimas
– dimas, Commented Apr 3, 2017 at 5:07
@dimas you aren't convertng json to string. Do: var fcData = JSON.stringify(jsonD); — Nishanth Matha
– Nishanth Matha, Commented Apr 3, 2017 at 5:08
"[object Object]" is what I'd expect to see in the console when you call .toString() on it (use console.log(data) instead), but does the actual chart work? I'm not familiar with that charting tool, but the other charting libraries that I've used expect the data as an array/object, not as a JSON string, and data will already be an object after jQuery automatically parsed your JSON. — nnnnnn
– nnnnnn, Commented Apr 3, 2017 at 5:09
@nishanth and nnnnnn i was just trying it out see if it works. Anyway i tried the code you have suggested but the chart still doesn't work. I am using fusioncharts library. It says Invalid data, maybe this is a problem with the library itself? — dimas
– dimas, Commented Apr 3, 2017 at 5:13

Nishanth Matha · Accepted Answer · 2017-04-03 05:49:38Z

Like @nnnnnn mentioned in his comment... $.getJSON doesn't return a json. It always returns a Deferred Object.

If you want to use the data of $.getJSON success function you could do:

//declaring in global scope
var jsonD={};
$.getJSON("http://localhost:8080/v1/cityData", function ( data ) {
    console.log("Success");
    alert(data);
    //changing the value in local scope
    jsonD = data;
}).done(function(){
        var fcData = jsonD.model.fusionCharts;
        $("#fChart").insertFusionCharts({
             type: "column2d",
             width: "450",
             height: "250",
             dateFormat: "JSON",
            dataSource: fcData
         });
 })

EDIT

After inspecting your json data I see the data isn't extracted properly. FusionCharts expect theJSON data to have chart and data keys. This data is present in your JSON inside data.model.fusionCharts as string

So, you have to first extract them then parse it to json and then supply it to your dataSource.

So, you're actual fusionChart set up would be something like:

.done(function(){
            var cfChart= JSON.parse(jsonD.model.fusionCharts.chart);
            var cfData= JSON.parse(jsonD.model.fusionCharts.data);
            $("#fChart").insertFusionCharts({
                 type: "column2d",
                 width: "450",
                 height: "250",
                 dateFormat: "JSON",
                dataSource: {chart:cfChart,data:cfData}
             });
     })

i still received an error after applying the suggestions you did... I've updated my code and posted the error.
Now the chart is showing up! thank you very much! wish i could add more points to this answer. Although am a bit confused now as to what you did in the data source part.
ok what I did in dataSource is two steps: 1) I did extract the chart part from your JSON data by doing jsonD.model.fusionCharts.chart . Then this is tring and Fusion chart expects JSON so I have to convert to json by doing JSON.parse(<<extracted part>>) 2) I did the same with data extracted it and then parsed it to JSON.
finally, I'm creating a new object...with 1) chart as key and value as info extracted and parsed from jsonD.model.fusionCharts.chart 2) with data as key and value as info extracted and parsed from jsonD.model.fusionCharts.data and passing it to dataSource using the syntax dataSource: {chart:cfChart,data:cfData}

Collectives™ on Stack Overflow

Error parsing JSON string using parseJSON

Update 2

Update 3

Working code

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update 2

Update 3

Working code

1 Answer 1

7 Comments

Linked

Related