Разбор JSON с помощью jQuery

Question

Эй.Я пытаюсь проанализировать некоторые JSON в HTML с помощью jQuery.Я проверил, работает ли мой запрос API, и он работает.

Я думаю, что он застревает при добавлении HTML.

$('button').click(function(){
    $.getJSON('http://api.songkick.com/api/3.0/events.json?apikey=MY_API_KEY&location=ip:94.228.36.39', function(data) {
        $('.json').html('<p>' + data.location + '</p>' + '<p>' + data.uri + '</p>');
    });
});

getJson возвращает загрузки данных вследующий формат, но я не могу разобрать его в HTML.

{
    "resultsPage": {
        "totalEntries": 99,
        "page": 1,
        "results": {
            "event": [
                {
                    "type":"Concert",
                    "location": {
                        "city":"Huddersfield, UK"
                        ,"lng":-1.78333,
                        "lat":53.65},
                    "popularity":0.0,
                    "status":"ok",
                    "uri":"http:\/\/www.songkick.com\/concerts\/4993456-barbirolli-quartet-at-st-pauls-hall?utm_source=2251&utm_medium=partner",
                    "venue":{
                        "uri":"http:\/\/www.songkick.com\/venues\/156338-st-pauls-hall?utm_source=2251&utm_medium=partner",
                        "lng":-1.78333,
                        "displayName":"St. Paul's Hall",
                        "id":156338,
                        "metroArea": etc......

Answer 1

Проблема, как я вижу, в том, что структура вашего JSON отличается от того, что вы пытаетесь оценить. Это гораздо глубже вложенное. Поэтому вместо data.location вам понадобится что-то вроде data.resultsPage.results.event[0].location.

Это означает, что, скорее всего, вы просто пропускаете цикл над data.resultsPage.results.event в своем коде.

Answer 2

JSON-объект, который вы привели в качестве примера, имеет несколько уровней. Чтобы добраться до места, вам нужно будет гнездиться внутри -

var events = data['resultsPage']['results']['event'];
//Actually an array of events
var location = events[0]['location'];
...

Answer 3

Проблема в том, что ответ не имеет свойств location или uri.

$('button').click(function(){
    $.getJSON('http://api.songkick.com/api/3.0/events.json?...', function(data) {
        // only guessing based on the information provided
        var events = data.resultsPage.results.event;
        for (var i = 0, l = events.length; i < l; i++) {
            $('.json').append('<p>' + events[i].location.city + '</p>'
                + '<p>' + events[i].uri + '</p>');
            });
        }
});

Answer 4

У меня была такая же проблема здесь.Проблема была в синтаксисе вложенных данных.

Я изменил:

+ events.location.city + 

На:

+ events.location['city'] +

Для каждого из обязательных полей, которые были вложены.Для не вложенных просто бросьте скобки:

+ events.uri + 

Answer 5

Добавлена ​​функция Райана, показывающая, что он работает с данным JSON, поэтому чего-то еще не хватает - вот простая версия JS

<div id="eventDiv"></div>
<script>
var data = {  
  "resultsPage": {    
    "totalEntries": 99,    
    "page": 1,    
    "results": {
      "event": [
        {"type":"Concert",
           "location": { 
             "city":"Huddersfield, UK","lng":-1.78333,"lat":53.65
           },
           "popularity":0.0,
           "status":"ok",
           "uri":"http:\/\/www.songkick.com\/concerts\/4993456-barbirolli-quartet-at-st-pauls-hall?utm_source=2251&utm_medium=partner",
           "venue": {
             "uri":"http:\/\/www.songkick.com\/venues\/156338-st-pauls-hall?utm_source=2251&utm_medium=partner",
             "lng":-1.78333,
             "displayName":"St. Paul's Hall",
             "id":156338
          }
        } 
      ]
    }
  }
}
window.onload=function() {
  var events = data.resultsPage.results.event;
  for (var i = 0, l = events.length; i < l; i++) {
    document.getElementById('eventDiv').innerHTML='<p>' + events[i].location.city + '</p><p>' + events[i].uri + '</p>';
  }
}

</script>