如何使用jQuery解析来自LastFM的这个特定的JSON数据？

Question

我试图解析一个使用LastFM API的JSON提要，但是在JSON数组中返回的某些元素的前缀是＃，我不知道如何引用。

Feed URL为here，可以看到visualised here。

我的jQuery代码到目前为止是这样的：

$.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); 

    }); 

基本上，我的每个项目，在饲料中循环以及动态建立一个列表，然后将其添加到DOM。

我无法弄清楚如何获取Feed中图像项的URL。对于不同的尺寸有不同的。对于图像元素的JSON看起来是这样的：

"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" 
      } 
      ] 
     } 

但我不明白为什么数组中的文本元素与＃和如何获得URL特定尺寸的图像前缀。任何帮助赞赏，因为我是一个jQuery初学者！谢谢。

Answer 1

这是他们格式化对象的一种非常奇怪的方式（禁止我不知道的要求，这可能是完全可能是）。

基本上，有两种方法可以在JavaScript中获取对象的属性：使用文字作为名称（例如obj.propertyName），或者使用带括号符号的字符串（例如obj["propertyName"]）。有时候你有使用字符串的方法，如果文字在JavaScript中是一个无效的标识符（和#text会），或者如果你正在创建属性名称。所以要获得item.venue.image.#text（这将是无效的），您可以使用item.venue.image["#text"]来代替。

但，你已经证明我们image是一个数组，其中每个元素有#text属性，而不是在阵列本身一样。如果你想找到的网址为给定大小，不幸的是你必须通过数组来寻找它：

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

使用它，你遇到了麻烦：

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

...假设你想要“中等”的网址。

当然，如果API文档保证某些大小将在某些索引处，那么您不需要去搜索，您可以直接在数组中进行索引。例如，在您向我们展示的示例中，“medium”URL条目位于数组中的位置1处。如果有保证的，你不必搜索：

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

...它说“给我对象的‘#text’属性在数组中的索引1”。 （实际上，实际上，JavaScript数组并不是真正的数组，但我们不要在这里进入它......）