Strip JSON tags when rendering object data in angular

Question

I am rendering This piece of JSON(1) using angular.js 1.6, The title and description seem to load, however I am unable to get the url from the images property, it currently displays it like this :

 <img ng-src="{"original": "https://xxx-export.s3.amazonaws.com/images/products/2016/12/product_1003_2.jpg"}">

How would I go about just getting the url to render in my template?

(1)This is the reference for of my json object:

   var items = [
      {
          "id": 61,
          "title": "Title 1",
          "description": "Desc",

         "images": [
              {
                  "original": "https://xxx-export.s3.amazonaws.com/images/products/2016/12/product_1003_2.jpg"
              },
              {
                  "original": "https://xxx-export.s3.amazonaws.com/images/products/2016/12/product_1003_5.jpg"
              },
              {
                  "original": "https://xxx-export.s3.amazonaws.com/images/products/2016/12/product_1003_3.jpg"
              }

          ]
];

(2) This is the how the data is being displayed in my template

<div ng-repeat="item in Item">
   <img ng-src="{$item.images[0]$}" />
    <h4>{$item.title$}</h4>
    <p>  {$item.description$} </p>
</div>

I believe you're looking to do <img ng-src="{$item.images[0].original$}"/> — Gershom Maes
– Gershom Maes, Commented Dec 22, 2016 at 21:07

Kevin Babcock · Accepted Answer · 2016-12-22 21:18:02Z

1

You're referencing the object in your images collection and not the object's property that contains the url. Try this:

<div ng-repeat="item in Item">
   <img ng-src="{$item.images[0].original$}" />
    <h4>{$item.title$}</h4>
    <p>{$item.description$}</p>
</div>

answered Dec 22, 2016 at 21:18

Kevin Babcock

10.2k20 gold badges72 silver badges90 bronze badges

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

Comments

Gershom Maes · Accepted Answer · 2016-12-22 21:10:03Z

1

You've got to dereference one more time! You're getting items[n].images[0], which is giving you something like { "original": "... url..." }.

You just need to get the original entry from that object. Replace

<img ng-src="{$item.images[0]$}" />

With:

<img ng-src="{$item.images[0].original$}" />

answered Dec 22, 2016 at 21:10

Gershom Maes

8,2253 gold badges42 silver badges63 bronze badges

Collectives™ on Stack Overflow

Strip JSON tags when rendering object data in angular

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related