如何使用jQuery解析来自LastFM的这个特定的JSON数据?
我试图解析一个使用LastFM API的JSON提要,但是在JSON数组中返回的某些元素的前缀是#,我不知道如何引用。如何使用jQuery解析来自LastFM的这个特定的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初学者!谢谢。
这是他们格式化对象的一种非常奇怪的方式(禁止我不知道的要求,这可能是完全可能是)。
基本上,有两种方法可以在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数组并不是真正的数组,但我们不要在这里进入它......)
谢谢,这是一个很好的答案,它可以帮助我更好地理解JSON。我也很高兴你也发现它返回数据的方式有些奇怪 - 我不确定我是否错过了一些明显的东西!无论如何,你的解决方案完美无缺,我非常感激。 – 2010-06-30 08:29:36
@Dan Diplo:非常好,很高兴帮助。是的,更常见的JSON和JavaScript方式是:'{“image”:{“small”:“http:\/\/userserve-ak.last.fm \/serve \/34 \ /2243904.gif”, “medium”:“http:\/\/userserve-ak.last.fm \/serve \/64 \ /2243904.gif”,...}}'但他们可能是从一个不同的源格式(XML,从它的外观来看)。 – 2010-06-30 09:08:34
谢谢你,很好的答案。 – Zach 2012-08-01 02:36:33