4

I have the JSON object returned by the api of last.fm as follow:

{
    "artists": {
        "artist": {
            "name": "Daft Punk",
            "playcount": "494599",
            "listeners": "106101",
            "mbid": "056e4f3e-d505-4dad-8ec1-d04f521cbb56",
            "url": "http://www.last.fm/music/Daft+Punk",
            "streamable": "1",
            "image": [
                {
                    "#text": "http://userserve-ak.last.fm/serve/34/5463.jpg",
                    "size": "small"
                },
                {
                    "#text": "http://userserve-ak.last.fm/serve/64/5463.jpg",
                    "size": "medium"
                },
                {
                    "#text": "http://userserve-ak.last.fm/serve/126/5463.jpg",
                    "size": "large"
                },
                {
                    "#text": "http://userserve-ak.last.fm/serve/252/5463.jpg",
                    "size": "extralarge"
                },
                {
                    "#text": "http://userserve-ak.last.fm/serve/500/5463/Daft+Punk.jpg",
                    "size": "mega"
                }
            ]
        },
        "@attr": {
            "page": "1",
            "perPage": "1",
            "totalPages": "1000",
            "total": "1000"
        }
    }
}

Now I am trying to get the images from the object but the key for the image url is "#text". I have no idea how is this value extracted in Javascript. I am using AngularJS but any suggestions using plain javascript also is okei. Is there any way I can use "#" in the key of the object to get its value.

Any help would be greatly appreciated.

Cheers :)

zambliner
  • 436
  • 2
  • 6
  • 21
  • 4
    Please note that the problem has **nothing** to do with JSON at all. It's rather about how to process arrays/objects in JavaScript. *How* you obtained the data (e.g. via JSON) is irrelevant to the problem. – Felix Kling Jan 12 '14 at 21:52
  • 1
    Also have a look at [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/q/11922383/218196). – Felix Kling Jan 12 '14 at 21:53

2 Answers2

4

Assuming it's in the obj var, this would return an array with the images

var imgSrcArray = obj.artists.artist.image.map(function(image){ return image['#text'] });

ES6:

const imgSrcArray = obj.artists.artist.image.map( image => image['#text'] );

That's it.

if you want to classicaly traverse this array, with this:

var images = obj.artists.artist.image;
for(var i=0; i < images.length; i++){
   var image = images[i];
   var url = image['#text'];
   console.log("url: ", url);   //Outputs the img url
}

Cheers

Edgar Villegas Alvarado
  • 18,204
  • 2
  • 42
  • 61
3

foo['artists']['artist']['image'][0]['#text']

anthony sottile
  • 61,815
  • 15
  • 148
  • 207