Getting image url from JSON response using AngularJS

Question

I'm trying to fetch an image from an API using AngularJS.

I'm using a link to trigger the $http function, and trying to parse the image url from the JSON response back into the HTML, but I think I'm missing something, as the response comes back OK, but the img url doesn't get "in place".

Here's my html:

<a ng-click="getImages()">Image: <img src="{{album.image.2.#text}}" /></a>

My JS:

$scope.getImages = function () {
  $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=%%%&artist=vnv+nation&album=empires&format=json').
    success(function(data4) {
        $scope.images = data4;
    });
}

And a example of JSON response:

album: {name:Empires, artist:VNV Nation, id:2025273, mbid:0c3ccb9f-e6c4-419d-934e-02e3be8a08c9,…}
artist: "VNV Nation"
id: "2025273"
image: [{#text:http://userserve-ak.last.fm/serve/34s/93873429.png, size:small},…]
   0: {#text:http://userserve-ak.last.fm/serve/34s/93873429.png, size:small}
   1: {#text:http://userserve-ak.last.fm/serve/64s/93873429.png, size:medium}
   2: {#text:http://userserve-ak.last.fm/serve/174s/93873429.png, size:large}
       #text: "http://userserve-ak.last.fm/serve/174s/93873429.png"
       size: "large"

EDIT: I made a Plunker. You can see in the console how the json response is called correctly, but the image url is still not being shown.

Khanh TO · Accepted Answer · 2014-03-16 14:15:06Z

5

Try ng-src:

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

<img ng-src="{{album.image.2.#text}}" />

Another problem is the # character and number. You could fix this with bracket notation:

<img ng-src="{{album.image[2]['#text']}}" />

DEMO

edited Mar 16, 2014 at 14:15

answered Mar 16, 2014 at 13:38

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Eric Mitjans Over a year ago

Hi! I've tried with ng-src, and it is still not getting populated with the proper url. Given the JSON example, is the route (album.image.2.#text) correct? Also, for whatever reason, with #text it brakes all my Angular code, without hash, it doesn't...

Khanh TO Over a year ago

@Eric Mitjans: I recommend that you avoid special characters in your property names. Ifi there is a special character, you could try bracket notation syntax: album.image[2]["#text"]. And about the path, looking at your source code, I guess: images.image[2]["#text"]

Eric Mitjans Over a year ago

The response comes from a 3rd party API, so unfortunately there's not much I can do about the special characters... I've created a Plunker, maybe is easier to see the problem :S

Khanh TO Over a year ago

@Eric Mitjans: I did not know that you get the data from a 3rd party API. In this case, you run into cross-domain problem. Does your 3rd party support JSONP?

Khanh TO Over a year ago

@Eric Mitjans: I added a working demo with same domain. In your case, your 3rd must support JSONP to make it work.

Collectives™ on Stack Overflow

Getting image url from JSON response using AngularJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related