Analyse JSON avec jQuery

Question

Hey. J'essaye d'analyser du JSON en HTML en utilisant jQuery. J'ai vérifié pour voir si ma demande d'API fonctionne, et c'est. Je pense qu'il se coince lors de l'ajout du code 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 renvoie des charges de données dans le format suivant, mais je ne peux pas sembler analyser au format 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

Le problème est que la réponse ne possède pas les propriétés location ou 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 2

Le problème, comme je peux le voir, est que la structure de votre JSON est différente de ce que vous essayez d'évaluer. C'est beaucoup plus imbriqué. Donc, au lieu de data.location, vous aurez besoin de quelque chose comme data.resultsPage.results.event[0].location.

Cela signifie que vous n'avez probablement plus qu'une boucle sur data.resultsPage.results.event dans votre code.

Answer 3

L'objet JSON que vous avez donné en exemple a plusieurs niveaux de profondeur. Pour se rendre à l'endroit, vous aurez à nicher à l'intérieur -

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

Answer 4

fonction de Ajouté Ryan pour vous montrer qu'il fonctionne avec le JSON donné donc quelque chose d'autre qui manque - est ici la version JS plaine

<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> 

Answer 5

J'ai eu le même problème ici. Le problème était avec la syntaxe des données imbriquées.

je changé:

+ events.location.city + 

Pour:

+ events.location['city'] + 

Pour chacun des champs obligatoires qui ont été imbriqués. Pour ne pas imbriquer, il suffit de supprimer les parenthèses:

+ events.uri +