javascript - 使用 parseJSON 解析 JSON 字符串时出错

Question

如果代码或数据本身有问题，需要一些帮助。虽然我怀疑它与代码有关，因为我尝试验证收到的 JSON 数据，但它的格式正确...

这是我的 JSON 数据

{"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}

这是我用来接收 JSON 数据的代码

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

});

我尝试了此article中所述的提示但它仍然不起作用。关于如何解决这个问题有什么建议吗？谢谢

更新2

按照 Nisanth 的建议修改了 jquery 代码，但图表库仍然无法工作。它说无效数据，也许这是融合图表库本身的问题？

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

代码工作正常，我在 .done 函数中添加了一个日志，它显示了 fcData 的值，如下所示。

更改了 fcData = jsonD.model.fusionCharts 并收到以下错误。

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)

更新3

代码更新

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

错误日志

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)

工作代码

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

Answer 1

就像 @nnnnnn 在他的评论中提到的那样... $.getJSON 不返回 json。它始终返回一个延迟对象。

如果你想使用$.getJSON成功函数的data，你可以这样做:

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

编辑

检查您的 json 数据后，我发现数据未正确提取。 FusionCharts 期望 JSON 数据具有 chart 和 data 键。此数据以 string

形式存在于 data.model.fusionCharts 内的 JSON 中

因此，您必须首先提取它们，然后将其解析为json，然后将其提供给您的dataSource。

因此，您实际的 fusionChart 设置将类似于:

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