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

如果代码或数据本身有问题，需要一些帮助。虽然我怀疑它与代码有关，因为我试图验证我收到的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}

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

});

下面是我用来接收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}

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

});

我尝试了上面的提示，但仍然不起作用。有关于如何解决这个问题的建议吗？谢谢

更新2 按照Nisanth的建议修改了jquery代码，但图表库仍然不起作用。它说数据无效，也许这是fusion charts库本身的问题

    $(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函数中添加了一个log，它显示了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)

工作代码

---

就像他在评论中提到的@nnnnnn

$。getJSON

不返回

json

。它总是返回一个

延迟对象

如果要使用

$.getJSON

成功函数的

数据

，可以执行以下操作：

//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

键。此数据以

字符串形式存在于
JSON
内
data.model.fusionCharts
as
string

因此，您必须首先
提取它们，然后将其解析为
json
，然后将其提供给
数据源

因此，实际的
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}
             });
     })

$.getJSON（）
函数不会返回JSON字符串，而是将其传递给
数据
参数中的回调函数。使用
数据
，从
$.getJSON（）
回调中调用
.insertFusioncharts（）
——注意jQuery将已经为您解析了JSON。@nnnnnnn在将其移到$.getJSON中后，我仍然收到相同的消息“[object object object]”。请检查我的更新。@dimas您没有将JSON转换为字符串。Do:
var fcData=JSON.stringify（jsonD）
“[object object]”
是我在控制台上调用
.toString（）
时希望看到的（使用
控制台.log（数据）
），但实际的图表工作吗？我不熟悉这个图表工具，但我使用过的其他图表库期望数据作为数组/对象，而不是JSON字符串，并且在jQuery自动解析JSON后，
data
将已经是一个对象。@nishanth和nnnnnn我只是尝试一下，看看它是否有效。无论如何，我尝试了你建议的代码，但图表仍然不起作用。我正在使用fusioncharts图书馆。上面说数据无效，也许这是库本身的问题？在应用了您的建议后，我仍然收到一个错误。。。我已经更新了代码并发布了错误。有一个输入错误。请检查最近的更新并重试！现在图表显示出来了！非常感谢你！希望我能对这个答案多加几点。虽然我现在对数据源部分的操作有些困惑。好的，我在
dataSource
中所做的是两个步骤：1）我确实通过执行
jsonD.model.fusionCharts.chart
从JSON数据中提取了
chart
部分。然后这是字符串，Fusion chart需要JSON，所以我必须通过执行
JSON.parse（）
2）转换为JSON。我对
数据做了同样的操作，提取了它，然后将它解析为JSON。最后，我正在创建一个新对象…1）
chart
作为键，值作为从jsonD.model.fusionCharts.chart中提取和解析的
info，2）使用
data
作为键，值作为从jsonD.model.fusionCharts.data中提取和解析的
info，并使用语法
dataSource:{图表：cfChart，数据：cfData}