AngularJS extract <img> from JSON

Question

How can I extract certain tag, for example img when parsing JSON in AngularJS? I have a JSON file with following data:

jsonFeed({
"title": "My Blog",
"items": [
   {
      "title": "Title1",
      "description": "<p><a href=\"#">Paul<\/a> posted a photo:<\/p><img src=\"https://farm8.staticflickr.com/7365/26872407641_cfbb210ee7_m.jpg\"/>"
   },
   {
      "title": "Title2",
      "description": "<p><a href=\"#">Beth<\/a> posted a photo:<\/p><img src=\"https://farm8.staticflickr.com/7287/26333398074_cfbce73532_m.jpg\"/>"
   }
   ]
 });

I need to get that image in description for every post:

<article ng-repeat="post in posts">
  <h1>{{ post.title }}</h1>
  <img src=""/>
</article>

Is there way to do that in angularjs or is it better to use jQuery?

use substring and indexof method to get the img tag from description. use angular $sanitize to show html — Jahirul Islam Bhuiyan
– Jahirul Islam Bhuiyan, Commented May 11, 2016 at 17:38

Kyle · Accepted Answer · 2016-05-11 18:04:50Z

1

~~You can use regex: ((?:http|https)(?::\\/{2}[\\w]+)(?:[\\/|\\.]?)(?:[^\\s"]*))~~

You can use $sce to bind the HTML: https://docs.angularjs.org/api/ngSanitize/service/$sanitize

var app = angular.module("app", []);

app.controller("MainCtrl", ["$scope", "$sce",
    function($scope, $sce) {
        $scope.jsonStr = {
            "title": "My Blog",
            "items": [{
                "title": "Title1",
                "description": "<p><a href=\"#\">Paul<\/a> posted a photo:<\/p><img src=\"https://farm8.staticflickr.com/7365/26872407641_cfbb210ee7_m.jpg\"/>"
            }, {
                "title": "Title2",
                "description": "<p><a href=\"#\">Beth<\/a> posted a photo:<\/p><img src=\"https://farm8.staticflickr.com/7287/26333398074_cfbce73532_m.jpg\"/>"
            }]
        }
        
        $scope.trustHtml = function(desc) {
        	return $sce.trustAsHtml(desc);
        }
        
    }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
  
  <h1>{{jsonStr.title}}</h1>
  
  <div ng-repeat="post in jsonStr.items">
    <h3>{{post.title}}</h3>
    <div ng-bind-html="trustHtml(post.description)" />
  </div>
  
</div>

edited May 11, 2016 at 18:04

answered May 11, 2016 at 17:51

Kyle

5,6077 gold badges38 silver badges48 bronze badges

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

1 Comment

user6145338 Over a year ago

Here I need to extract only <img> tag not the whole description, previous version of answer was helpful

Andrew Donovan · Accepted Answer · 2016-05-11 17:43:49Z

0

Use jqLite, use angular.element(post.description)[0].querySelector('img'); in your link function (if you are using a directive), or where ever angular.element is available to you.

answered May 11, 2016 at 17:43

Andrew Donovan

5522 silver badges14 bronze badges

Comments

Omar · Accepted Answer · 2016-05-11 17:48:28Z

0

You can use $limitTo filter with a negative value for get the tag and then $sanitize for render it as html.

Read the next docs: https://docs.angularjs.org/api/ng/filter/limitTo

https://docs.angularjs.org/api/ngSanitize/service/$sanitize

answered May 11, 2016 at 17:48

Omar

111 silver badge4 bronze badges

Comments

C14L · Accepted Answer · 2016-05-11 17:55:29Z

0

AngularJS comes with jqLite, called with angular.element()

obj['items'].forEach(function(val, i){
  var elm = angular.element(val['description'])[1].src;
  console.log(elm);
});

answered May 11, 2016 at 17:55

C14L

12.6k4 gold badges43 silver badges53 bronze badges

Comments

RVandersteen · Accepted Answer · 2016-05-11 21:08:10Z

0

How I would do it:

Loop over each item
Use regex to get the img url (e.g. \<img src=\\\"(.+)\\\")
add the image url (imgUrl in this example) to each item.

Then in your html use it like this:

<article ng-repeat="post in posts">
    <h1>{{ post.title }}</h1>
    <img ng-src="{{ post.imgUrl }}"/>
</article>

Notes

I used ng-src, not src
The regex is only a quick sample

answered May 11, 2016 at 21:08

RVandersteen

2,1475 gold badges28 silver badges50 bronze badges

Collectives™ on Stack Overflow

AngularJS extract <img> from JSON

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related