How can I parse this particular JSON data from LastFM using jQuery?

Question

I'm attempting to parse a JSON feed using the LastFM API but there are certain elements returned in the JSON array that are prefixed with a # that I don't know how to reference.

The feed URL is here and it can be seen visualised here.

My jQuery code so far looks like this:

$.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);

    });

I'm basically looping through each item in the feed and dynamically building a list which is then appended to the DOM.

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:

"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"
            }
          ]
        }

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.

Answer 1

That's a very strange way for them to format the object (barring requirements I'm not aware of, which is entirely likely).

Basically, there are two ways to get at the property of an object in JavaScript: Using a literal for the name (e.g., obj.propertyName), as you have, or using a string with brackets notation (e.g., obj["propertyName"]). Sometimes you have to use the string approach, if the literal would be an invalid identifier in JavaScript (and #text would be) or if you're creating the property name on the fly. So to get item.venue.image.#text (which would be invalid), you'd use item.venue.image["#text"] instead.

But, what you've shown us for image is an array where each element has a #text property, not where the array itself does. If you want to find the URL for a given size, unfortunately you have to search through the array for it:

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"
}

Using it where you're having trouble:

html += "<img src='" + findUrl(item.venue.image, "medium") + "' />";

...assuming you want the "medium" URL.

Of course, if the API documentation guarantees that certain sizes will be at certain indexes, you don't need to go searching, you could just index into the array directly. For instance, in the example you showed us, the "medium" URL entry is at position 1 in the array. If that's guaranteed, you don't have to search:

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

...which says "give me the '#text' property of the object at index 1 in the array." (Well, essentially. In fact, JavaScript arrays aren't really arrays, but let's not go into it here...)