Databases
StackOverflow2013
Postsdbo
POHow can I parse this particular JSON data from LastFM using jQuery?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I parse this particular JSON data from LastFM using jQuery?
    text
    copied!<p>I'm attempting to parse a JSON feed using the <a href="http://www.last.fm/api" rel="nofollow noreferrer">LastFM API</a> but there are certain elements returned in the JSON array that are prefixed with a # that I don't know how to reference.</p> <p>The feed URL is <a href="http://ws.audioscrobbler.com/2.0/?method=geo.getevents&amp;api_key=ca1599876cde298491941da8577de666&amp;format=json&amp;callback=?" rel="nofollow noreferrer">here</a> and it can be seen <a href="http://jsonviewer.stack.hu/#http://ws.audioscrobbler.com/2.0/?method=geo.getevents&amp;api_key=b25b959554ed76058ac220b7b2e0a026&amp;format=json" rel="nofollow noreferrer">visualised here</a>.</p> <p>My jQuery code so far looks like this:</p> <pre><code>$.getJSON('http://ws.audioscrobbler.com/2.0/?method=geo.getevents&amp;api_key=ca1599876cde298491941da8577de666&amp;format=json&amp;callback=?', function(data) { $.each(data.events.event, function(i, item) { html += "&lt;li&gt;&lt;a class='fm-event' href='" + item.url + "'&gt;&lt;h4&gt;" + item.title + "&lt;/h4&gt;"; html += "&lt;p&gt;at " + item.venue.name + ", " + item.venue.location.city + "&lt;br /&gt;"; html += "on " + item.startDate + "&lt;/p&gt;"; html += "&lt;img src='" + item.venue.image.text + "' /&gt;"; // This doesn't work. how do I do this? html += "&lt;/a&gt;&lt;/li&gt;"; }); $("#last-fm-events").append(html); }); </code></pre> <p>I'm basically looping through each item in the feed and dynamically building a list which is then appended to the DOM.</p> <p>What I can't figure out is how to get at the URLs for the image items in the feed. There are different ones for different sizes. The JSON for the image elements looks like this:</p> <pre><code>"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" } ] } </code></pre> <p>But I don't understand why the text element in the array is prefixed with a # and how to get the URL for an image of a particular size. Any help appreciated as I'm a jQuery beginner! Thanks.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload