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, Apr 03 '17 at 04:56
@nnnnnnn i still receive the same message "[object Object] " after I moved it inside $.getJSON check my update. — dimas, Apr 03 '17 at 05:07
@dimas you aren't convertng json to string. Do: `var fcData = JSON.stringify(jsonD);` — Nishanth Matha, Apr 03 '17 at 05: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, Apr 03 '17 at 05: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, Apr 03 '17 at 05:13
chart is still not working, modified dateFormat: "JSON" as you have suggested please see my update. — dimas, Apr 03 '17 at 05:27
@NishanthMatha the chart canvas is now showing but there is no data and there is an error in the console — dimas, Apr 03 '17 at 05:32

Nishanth Matha · Accepted Answer · 2017-04-03T05:49:38.997

2

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}
             });
     })

edited Apr 03 '17 at 05:49

answered Apr 03 '17 at 05:06

Nishanth Matha

5,993
2
19
28

i still received an error after applying the suggestions you did... I've updated my code and posted the error. – dimas Apr 03 '17 at 05:47
there was a typo..check the recent update and try it! – Nishanth Matha Apr 03 '17 at 05:47
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. – dimas Apr 03 '17 at 05:50
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(<>)` 2) I did the same with `data` extracted it and then parsed it to JSON. – Nishanth Matha Apr 03 '17 at 05:54
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}` – Nishanth Matha Apr 03 '17 at 05:57
ok i think I got it now but it really requires some deep understanding of javascript which i still require. Another thing i noticed you only extracted fusioncharts portion of the json data but I don't think the view and model part is not needed is that correct? If yes would it be safe if I somehow modify the rest data am publishing in the backend? – dimas Apr 03 '17 at 06:02
@dimas absolutely yes. There is no need for other data just pass `jsonD.model.fusionCharts` (`fusionCharts` part which is present in `model`) part from the backend. It will make your code and life much easier :) – Nishanth Matha Apr 03 '17 at 06:06

Error parsing JSON string using parseJSON

Update 2

Update 3

Working code

1 Answers1