7

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?

agm
  • 143
  • 1
  • 5

1 Answers1

17

you can access those properties with [] brackets:

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

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

Santiago Hernández
  • 4,983
  • 2
  • 24
  • 33