使用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上說的提示，但它仍然不工作。有關如何解決這個問題的任何建議？由Nisanth建議，但圖表庫仍然沒有工作由於

更新2

修改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。它總是返回一個Deferred Object。

如果你想使用$.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密鑰。這個數據是出現在你的JSON內data.model.fusionCharts爲string

所以，你必須首先extract他們，那麼它解析到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} 
      }); 
    })