Accessing JSON value when key has special character

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?

score 17 · Accepted Answer · edited Apr 14 '23 at 18:39

17

you can access those properties with [] brackets:

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

https://tc39.es/ecma262/multipage/ecmascript-language-expressions.html#sec-property-accessors

edited Apr 14 '23 at 18:39

user3840170

26,597
4
30
62

answered May 01 '15 at 01:36

Santiago Hernández

5,438
2
26
34

Accessing JSON value when key has special character

1 Answers1