使用jQuery加載JSON，然后將其顯示給查看器

Question

我正在嘗試通過調用URL使用Met Office的DataPoint API加載JSON文件：

http://datapoint.metoffice.gov.uk/public/data/val/wxfcs/all/json/sitelist?key=[MY_API_KEY_GOES_HERE]

返回的JSON樣本如下所示：

{
    "Locations": {
        "Location": [
            {
                "elevation": "228.0",
                "id": "3063",
                "latitude": "57.206",
                "longitude": "-3.827",
                "name": "Aviemore",
                "nationalPark": "Cairngorms National Park",
                "region": "he",
                "unitaryAuthArea": "Highland"
            },
            {
                "elevation": "1245.0",
                "id": "3065",
                "latitude": "57.116",
                "longitude": "-3.642",
                "name": "Cairn Gorm Summit",
                "nationalPark": "Cairngorms National Park",
                "region": "he",
                "unitaryAuthArea": "Moray"
            },
            {
                "elevation": "146.0",
                "id": "3238",
                "latitude": "55.02",
                "longitude": "-1.88",
                "name": "Albemarle",
                "region": "ne",
                "unitaryAuthArea": "Northumberland"
            }
        ]
    }
}

我需要做的是顯示位置列表。 為此，我有以下代碼：

$(document).ready(function() {

    $("#driver").click(function(event){
        $.getJSON('http://datapoint.metoffice.gov.uk/public/data/val/wxfcs/all/json/sitelist?key=' + MY_API_KEY_GOES_HERE, function(jd) {
            $('#stage').html('<p> locations: ' + jd.locations + '</p>');
            $('#stage').append('<p>location: ' + jd.location + '</p>');
            $('#stage').append('<p> name: ' + jd.name + '</p>');
        });
    });

});

但是它每次都無法加載，我遵循了許多教程，所有這些教程似乎都無濟於事。 為什么位置列表失敗？

謝謝。

Answer 1

$.getJSON()調用是正確的（我從另一個SO人在線找到了一個不像您那么小心的密鑰，並且我暫時使用他/她的密鑰進行測試）。

獲得結果后，您將錯誤地讀取JSON：

$('#stage').html('<p> locations: ' + jd.locations + '</p>');
$('#stage').append('<p>location: ' + jd.location+ '</p>');
$('#stage').append('<p> name: ' + jd.name+ '</p>');

錯了 您需要考慮大小寫，不同的數據類型 （對象，數組和字符串不是相同的） 以及它們的結構方式 ：

• 代替jd.locations ，使用jd.Locations
• 代替jd.location ，使用jd.Locations.Location
• 代替jd.name ，使用jd.Locations.Location[ x ].name （其中x是位置的索引）

考慮到這一點后，只需遍歷位置記錄即可：

$(document).ready(function() {

    $("#driver").click(function(event) {
       $.getJSON('http://datapoint.metoffice.gov.uk/public/data/val/wxfcs/all/json/sitelist?key=(KEYGOESHERE)', function(jd) {
            $('#stage').html('<p> There are  ' + jd.Locations.Location.length + ' locations</p>');
            for (var x = 0; x < jd.Locations.Location.length; x++) {
                $('#stage').append('<p>location: ' + jd.Locations.Location[x].name + '</p>');
            }
        });
    });
});

上面的代碼將導致如下所示：

有5968個地點

地點：凱恩韋爾

地點：Inverbervie

地點：Rosehearty Samos

地點：Strathallan

....

Answer 2

正如Nielarshi建議的那樣，您需要使用相同的原始域或api資源上允許的jsonp回調 。 或至少在后端Web服務器上啟用了允許的跨域請求 。

從JQuery doc中 ：

由於瀏覽器安全性的限制，大多數“ Ajax”請求都受相同的原始策略限制； 該請求無法從其他域，子域，端口或協議成功檢索數據。

您還必須確定響應頭“ Content-Type”。 如果為“ application / json”，則可以像使用數據一樣使用數據，否則，則需要使用var object = JSON.parse(jd)解析字符串。