JSON key has '#' Special character

Question

Currently I need the URL for an image and I am getting it through the JSON file. I am not sure to acquire the key that has the URL due to the key having a # at the start. Here is the JSON:

{  
 "#text":"https://lastfm-img2.akamaized.net/i/u/34s/3ed37777196a6f2c29c02a1a58a93e4d.png",
 "size":"small"
},
{  
 "#text":"https://lastfm-img2.akamaized.net/i/u/64s/3ed37777196a6f2c29c02a1a58a93e4d.png",
 "size":"medium"
}

Answer 1

Same as with every other time you encounter some JSON string!

The # is an invalid character in a property name, work around is the bracket notation: «object»[property] --> «array»[index]['#text'].

We can use forEach to extract the results.

var string = '[{"#text":"https://lastfm-img2.akamaized.net/i/u/34s/3ed37777196a6f2c29c02a1a58a93e4d.png","size":"small"},{"#text":"https://lastfm-img2.akamaized.net/i/u/64s/3ed37777196a6f2c29c02a1a58a93e4d.png","size":"medium"}]';

var parsed = JSON.parse(string);

//parsed is an array, we can loop over it
parsed.forEach(function(obj) {
      console.log(obj['#text']);
});

Even prettier would be if you can select from the array based on size:

var string = '[{"#text":"https://lastfm-img2.akamaized.net/i/u/34s/3ed37777196a6f2c29c02a1a58a93e4d.png","size":"small"},{"#text":"https://lastfm-img2.akamaized.net/i/u/64s/3ed37777196a6f2c29c02a1a58a93e4d.png","size":"medium"}]';

function getImageUrlBySize(size, json) {
  var parsed = JSON.parse(json);
  return parsed.find(function(element) { //modern browsers only (no IE)
      return element['size'] == size;
  })['#text']; //add text here since find returns the full item
}

console.log(getImageUrlBySize('small', string));