代码之家 › 专栏 › 技术社区 › Dan Diplo

如何使用jquery解析来自lastfm的特定JSON数据?

parsing json jquery javascript

Dan Diplo · 技术社区 · 16 年前

我正在尝试使用 LastFM API 但JSON数组中返回的某些元素的前缀是,我不知道如何引用。

到目前为止,我的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初学者,感谢您的帮助!谢谢。

1 回复 | 直到 16 年前

T.J. Crowder 16 年前

对于他们来说,这是一种非常奇怪的方式来格式化对象(除了我不知道的需求,也就是 完全地 可能)。

基本上,有两种方法可以获取javascript中对象的属性:使用文本作为名称(例如, obj.propertyName ,或者使用带括号符号的字符串(例如, obj["propertyName"] )有时你有要使用字符串方法,如果文本在javascript中是无效的标识符(和 #text 或者如果您正在动态创建属性名。所以得到 item.venue.image.#text (这将是无效的),你将使用 item.venue.image["#text"] 相反。

但是 ,你给我们看的东西 image 是一个数组,其中要素有一个 课文 属性,而不是数组本身的位置。如果要查找给定大小的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") + "' />";

…假设您需要“中等”的URL。

当然,如果API文档保证某些大小将处于某些索引,则不需要进行搜索,只需直接索引到数组中即可。例如,在您向我们展示的示例中,“中等”URL条目位于数组中的位置1。如果有保证,你不必搜索:

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

…上面写着“给我数组中索引1处对象的文本”属性。事实上,javascript数组不是真正的数组,但我们不要在这里讨论它…)