Загрузка JSON с JQuery, а затем отображать его на зрителя

Question

Я пытаюсь загрузить файл в формате JSON с помощью DataPoint API of the Met Office путем вызова URL:

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() (я нашел ключ от другого другого человека, который был не таким осторожным, как вы, и я использовал его/ее ключ временно для тестирования).

После получения результатов, вы читаете 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 местоположений

Расположение: Cairnwell

Расположение: Инвербери

Расположение: Rosehearty Самос

Расположение: Strathallan

....

Answer 2

Как предлагал Nielarshi, вам нужен тот же исходный домен, или jsonp callback, разрешенный на ресурсе api. Или, по крайней мере, allowed cross domain requests включен на бэкэнд-сервере.

От JQuery doc:

Из-за ограничений безопасности браузера, большинство запросов «Ajax» могут быть одной и той же политики происхождения; запрос не может успешно извлекать данные из другого домена, субдомена, порта или протокола.

Вы также должны быть уверены в заголовке ответа «Content-Type». Если это «application/json», вы можете использовать данные так же, как и вы, если нет, вам нужно проанализировать строку с помощью var object = JSON.parse(jd)