如何使用 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。

我不知道如何获取提要中图片项目的 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），或者使用带括号表示法的字符串（例如，@987654322 @)。有时您必须使用字符串方法，如果文字在 JavaScript 中是无效的标识符（#text 会是），或者如果您正在动态创建属性名称。所以要获得item.venue.image.#text（这将是无效的），你可以使用item.venue.image["#text"]。

但是，您向我们展示的image 是一个数组，其中每个元素 都有一个#text 属性，而不是数组本身的属性。如果你想找到给定大小的 URL，不幸的是你必须在数组中搜索它：

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"] + "' />";

...它说“给我数组中索引 1 处对象的 '#text' 属性。” （嗯，本质上。事实上，JavaScript 数组并不是真正的数组，但我们先不在这里讨论它......）