getting img src from json data while using AngularJS ng-bind-html

Question

So I got a interesting question to which I haven't found a answer to.

Let's say I got a bunch of data coming from a JSON file like, but somehow one of the main fields looks like this

description : '<img src="http://o.aolcdn.com/hss/storage/midas/37c38989a5f26031be3e0ec5ffc5cd2/200012386/got-hbo-go-crash-2014-04-07-01_thumbnail.jpg"/> Viewing of the Game of Thrones season debut came to a crashing halt yesterday thanks to server problems with HBO Go. The cable outfit first reported the problem late yesterday via Twitter, and finally restored full service early this morning. That...'

How would I be able to get the src from that IMG while using ng-bind-html to bind the json data to the innerHTML on my page. ( using display:none; on the img itself so it would'nt display )

I have tried getElementsByTags and so on, but nothing returned a valid value.

Is there some kind of "angular" way to do it or... ?

BR's

lucuma · Accepted Answer · 2014-06-04 13:33:11Z

Based on the html stored in the object you could do this:

var json = {description : '<img src="http://o.aolcdn.com/hss/storage/midas/37c38989a5f26031be3e0ec5ffc5cd2/200012386/got-hbo-go-crash-2014-04-07-01_thumbnail.jpg"/> Viewing of the Game of Thrones season debut came to a crashing halt yesterday thanks to server problems with HBO Go. The cable outfit first reported the problem late yesterday via Twitter, and finally restored full service early this morning. That...'};

  $scope.imgPath = '';

  $scope.getImage = function() {
    el = angular.element(angular.element('<div>' + json.description + '</div>').find('img')[0]);
    $scope.imgPath = el.attr('src');

  }

Here is a demo: http://plnkr.co/edit/JXy97lrN5FyW1MK33qO1?p=preview

This solution assumes jQuery isn't included in the project.

This also works:

 $scope.imgPath = angular.element(json.description).attr('src');

Demo: http://plnkr.co/edit/zVllp9bmsU2DoZwDZnCY?p=info

Austin Thompson · Accepted Answer · 2014-06-04 14:07:34Z

2

The angular way of doing this would be to write a filter that does the massaging that you need.

Something like this:

<div ng-bind-html="data | extractSrcUrl"></div>

and then

app.filter('extractSrcUrl', function () {
  return function (text) {
      var output = awesomeRegexExtractionStuff(text); // fill this in
      return output;
  }
});

I attempted a jsfiddle but I couldn't quite get the regex right. Here it is anyway.

Edit: I updated my fiddle using @lucuma's way of extracting the url: http://jsfiddle.net/LxK7W/2/

edited Jun 4, 2014 at 14:07

answered Jun 4, 2014 at 13:35

Austin Thompson

2,3011 gold badge17 silver badges23 bronze badges

2 Comments

user2831723 Over a year ago

that's pretty good but let's say it has more then 1 image within the description. It Doesn't return anything then. Why is that. Shouldn't it return at least one value ?

Austin Thompson Over a year ago

It seemed to still return one when I played around with it. Can you post the html that failed? Also I made another jsfiddle that gets all the image sources. Right now it just concatenates them but it might be a useful start. jsfiddle.net/LxK7W/3

Collectives™ on Stack Overflow

getting img src from json data while using AngularJS ng-bind-html

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related