我正在尝试使用LastFM API解析JSON提要,但JSON数组中返回的某些元素前缀为#,我不知道如何引用。
Feed网址为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);
});
我基本上循环遍历Feed中的每个项目并动态构建一个列表,然后将其附加到DOM。
我无法弄清楚如何获取Feed中图片项的网址。不同尺寸有不同的。图像元素的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初学者!感谢。
答案 0 :(得分:9)
这是他们格式化对象的一种非常奇怪的方式(除了我不知道的要求,完全可能)。
基本上,有两种方法可以在JavaScript中获取对象的属性:使用文字作为名称(例如,obj.propertyName
),或者使用带括号表示法的字符串(例如, obj["propertyName"]
)。有时你有使用字符串方法,如果文字在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文档保证某些大小将在某些索引处,您不需要进行搜索,您可以直接索引到数组中。例如,在您向我们展示的示例中,“中”URL条目位于数组中的位置1。如果保证,您不必搜索:
html += "<img src='" + item.venue.image[1]["#text"] + "' />";
...其中说“给我数组中索引1处对象的'#text'属性。” (嗯,基本上。事实上,JavaScript数组并不是真正的数组,但我们不在这里讨论......)