使用js文件訪問本地JSON對象

Question

我正在使用js文件嘗試訪問本地JSON文件。 但這是行不通的。 即使我使用正確的url，代碼仍然無法從JSON對象檢索數據。

js文件：

var pieData = (function() {
        var json = null;
        $.ajax({
            'async': false,
            'global': false,
            'url': "http://127.0.0.1:8000/static/pwash/js/pie.json",
            'dataType': "json",
            'success': function (data) {
                json = data;
            },
            'error': function(data){
                console.log(data);
            }
        });
        return json;
    })();

    alert(pieData[0].value)

JSON：

[
                {
                    "value": 200,
                    "color":"#30a5ff",
                    "highlight": "#62b9fb",
                    "label": "Blue"
                },
                {
                    "value": 50,
                    "color": "#ffb53e",
                    "highlight": "#fac878",
                    "label": "Orange"
                },
                {
                    "value": 100,
                    "color": "#1ebfae",
                    "highlight": "#3cdfce",
                    "label": "Teal"
                },
                {
                    "value": 120,
                    "color": "#f9243f",
                    "highlight": "#f6495f",
                    "label": "Red"
                }
];

我無法理解給定的地方我走錯了。

Answer 1

在您的情況下，最有可能使用路徑訪問本地json對象而不是http：

"./static/pwash/js/pie.json"

Answer 2

您的json文件有錯誤。 您的json無效。 它的末尾有分號。 請刪除並嘗試。

Answer 3

請嘗試這種和甜

$.getJSON('http://127.0.0.1:8000/static/pwash/js/pie.json', function (data) {
          console.log(data);
        });

json文件：

{
  "items": [

            {
                "value": 200,
                "color":"#30a5ff",
                "highlight": "#62b9fb",
                "label": "Blue"
            },
            {
                "value": 50,
                "color": "#ffb53e",
                "highlight": "#fac878",
                "label": "Orange"
            },
            {
                "value": 100,
                "color": "#1ebfae",
                "highlight": "#3cdfce",
                "label": "Teal"
            },
            {
                "value": 120,
                "color": "#f9243f",
                "highlight": "#f6495f",
                "label": "Red"
            }
       ]
}