Comment puis-je analyser cette donnée JSON particulière de LastFM en utilisant jQuery?

Question

J'essaye d'analyser un flux JSON en utilisant le LastFM API mais il y a certains éléments retournés dans le tableau JSON qui sont préfixés par un # que je ne sais pas comment référencer.

L'URL de flux est here et peut être vue visualised here.

Mon code jQuery donc ressemble beaucoup à ceci:

$.getJSON('http://ws.audioscrobbler.com/2.0/?method=geo.getevents&api_key=ca1599876cde298491941da8577de666&format=json&callback=?', function(data) { 

     $.each(data.events.event, function(i, item) { 

      html += "<li><a class='fm-event' href='" + item.url + "'><h4>" + item.title + "</h4>"; 
      html += "<p>at " + item.venue.name + ", " + item.venue.location.city + "<br />"; 
      html += "on " + item.startDate + "</p>"; 
      html += "<img src='" + item.venue.image.text + "' />"; // This doesn't work. how do I do this? 
      html += "</a></li>"; 
     }); 

     $("#last-fm-events").append(html); 

    }); 

Je suis essentiellement une boucle à travers chaque élément dans l'alimentation et la construction de manière dynamique une liste qui est ensuite ajouté au DOM.

Ce que je n'arrive pas à comprendre, c'est comment obtenir les URL pour les éléments de l'image dans le flux. Il y en a différents pour différentes tailles. Le JSON pour les éléments d'image ressemble à ceci:

"image": [ 
      { 
       "#text": "http:\/\/userserve-ak.last.fm\/serve\/34\/2243904.gif", 
       "size": "small" 
      }, 
      { 
       "#text": "http:\/\/userserve-ak.last.fm\/serve\/64\/2243904.gif", 
       "size": "medium" 
      }, 
      { 
       "#text": "http:\/\/userserve-ak.last.fm\/serve\/126\/2243904.gif", 
       "size": "large" 
      }, 
      { 
       "#text": "http:\/\/userserve-ak.last.fm\/serve\/252\/2243904.gif", 
       "size": "extralarge" 
      }, 
      { 
       "#text": "http:\/\/userserve-ak.last.fm\/serve\/_\/2243904\/A38.gif", 
       "size": "mega" 
      } 
      ] 
     } 

Mais je ne comprends pas pourquoi l'élément de texte dans le tableau est préfixé avec un # et comment obtenir l'URL d'une image d'une taille particulière. Toute aide appréciée car je suis un débutant jQuery! Merci.

Answer 1

C'est une façon très étrange pour eux de formater l'objet (sauf les exigences que je ne connais pas, qui est entièrement probable).

Fondamentalement, il y a deux façons d'obtenir à la propriété d'un objet en JavaScript: En utilisant un littéral le nom (par exemple, obj.propertyName), que vous avez, ou en utilisant une chaîne avec la notation des supports (par exemple, obj["propertyName"]). Parfois vous avez pour utiliser l'approche de chaîne, si le littéral serait un identificateur invalide en JavaScript (et #text serait) ou si vous créez le nom de propriété à la volée. Donc, pour obtenir item.venue.image.#text (ce qui serait invalide), vous utiliseriez item.venue.image["#text"] à la place.

Mais, ce que vous nous avez montré pour image est un tableau où chaque élément possède une propriété #text, pas où vient le tableau lui-même. Si vous voulez trouver l'URL pour une taille donnée, malheureusement, vous devez rechercher à travers le réseau pour elle:

function findUrl(image, size) { 
    var n, entry; 

    for (n = 0; n < image.length; ++n) { 
     // Get this entry from the array 
     entry = image[n]; 

     // Is this the size we want? 
     if (entry.size == size) { // (`size` is a valid identifier, can use a literal) 
      // Yes, return this URL 
      return entry["#text"]; // (`#text` is not, must use brackets and a string) 
     } 
    } 
    return null; // Or "" or undefined or whatever you want to use for "not found" 
} 

l'aide où vous rencontrez des problèmes:

html += "<img src='" + findUrl(item.venue.image, "medium") + "' />"; 

... en supposant vous voulez l'URL "moyenne".

Bien sûr, si la documentation de l'API garantit que certaines tailles seront à certains index, vous n'avez pas besoin d'aller chercher, vous pouvez simplement indexer dans le tableau directement. Par exemple, dans l'exemple que vous nous avez montré, l'entrée d'URL "moyenne" est à la position 1 dans le tableau. Si c'est garanti, vous n'avez pas à rechercher:

html += "<img src='" + item.venue.image[1]["#text"] + "' />"; 

... qui dit « donne-moi la propriété « #text » de l'objet à l'index 1 dans le tableau. » (En fait, les tableaux JavaScript ne sont pas vraiment des tableaux, mais n'abordons pas ici ...)