display name from last fm json feed parsed with jquery

Question

I am trying to get a json feed and display the names of the artists. on the line that says element.artist, it displays [object Object],[object Object],[object Object] . I am very new to this. How would I display the contents of these objects?

<script type="text/javascript">
    $(document).ready(function() {
    $.ajax({ 
        type: 'GET', 
        url: 'http://ws.audioscrobbler.com/2.0/?method=artist.getsimilar&artist=richie%20hawtin&api_key=53c21030b0e4c4ff051083aacdc6dc54&format=json', 
        data: { get_param: 'value' }, 
        dataType: 'json',
        success: function (data) { 
            $.each(data, function(index, element) {
                $('body').append($('<div>', {
                    text: element.artist
                }));
            });
        }
    });
    });
</script>

Adriano Carneiro · Accepted Answer · 2012-11-08T15:46:01.807

That's because element.artist is an object. Probably an artist will have a property like element.artist.name. Place a breakpoint in your browser dev tools and inspect the object to see the available properties.

Update

I've just tested you call. Change you success callback to this:

success: function(data) {
    $('body').append($('<div>', {
        text: data.similarartists.artist.map(function(elem) {
            return elem.name;
        }).join(", ")
    }));
}

Here, have a working fiddle: http://jsfiddle.net/adrianonantua/tU2JA/

score 1 · Answer 2 · answered Nov 08 '12 at 15:25

1

You can use

JSON.stringify(value [, replacer] [, space])

To convert your data object into a String.

http://msdn.microsoft.com/en-us/library/cc836459(v=VS.94).aspx

answered Nov 08 '12 at 15:25

Stefan

14,826
17
80
143

Eli Gassert · Answer 3 · 2012-11-08T15:42:35.277

There are two things you can do at this point to help debug in a pinch.

Open up your JS / developer console (often F12. If using FF, get FireBug). Set a breakpoint on text: element.artist line. Then re-run the page and when the breakpoint is hit, look at the element tag in the "watch" or "variable" (depending on which browser you're using) window. This will let you see the full hierarchy at the time the breakpoint is hit.
A little more "hackish" before your $('body') line add "window.element = element;" Then, still in your developer console, where you can type JS directly into the console, type "element" and hit enter. This will give you a link to click/expand the object and view its details.
RTFM :) there's probably a document explaining the layout of the data. And in this case, you can even make it easier: Just load http://ws.audioscrobbler.com/2.0/?method=artist.getsimilar&artist=richie%20hawtin&api_key=53c21030b0e4c4ff051083aacdc6dc54&format=json in a browser and it'll show the full JSON document hierarchy. In this case, artist is an array of artists. So if you wanted to output the name of the first one: element.artist[0].name. In your loop, as suggested by someone else, it'd be element.artist.name

display name from last fm json feed parsed with jquery

3 Answers3