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 :)
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