Accessing JSON value when key has special character [duplicate]

Question

I have the following JSON object, which I'll call data.

{
  "topalbums": {
    "album": {
      "image": [
        {
          "#text": "http:\/\/userserve-ak.last.fm\/serve\/34s\/88057565.png",
          "size": "small"
        },
        {
          "#text": "http:\/\/userserve-ak.last.fm\/serve\/64s\/88057565.png",
          "size": "medium"
        },
        {
          "#text": "http:\/\/userserve-ak.last.fm\/serve\/126\/88057565.png",
          "size": "large"
        },
        {
          "#text": "http:\/\/userserve-ak.last.fm\/serve\/300x300\/88057565.png",
          "size": "extralarge"
        }
      ]
    }
  }
}

In an angular controller, I call this JSON object data.topalbums.album.

Back in my HTML page, I'm trying to insert the last (3rd) image from the image aray, using ng-src:

ng-src="{{album.image[3].#text}}"

This of course cause angular to throw an Lexer Error, due to the # character.

I've tried escaping the character with no luck:

ng-src="{{album.image[3].%23text}}"

How can I access the value of the #text key in the JSON object's image array?

Answer 1

you can access those properties with [] brackets:

ng-src="{{album.image[3]['#text']}}"

https://tc39.github.io/ecma262/#sec-property-accessors