How to show images retrieved from JSON on page using Angular.js

Question

I am newbie to angular.js. I am developing a shoppingcart Application, I am getting a JSON Object from database from AJAX call. But I am not getting How to show all the images(url stored in fileLocation in JSON) from JSON response on to Html page using Angular js.

Here is my code:

My JSON

{
  "_embedded": {
    "binaries": [
        {
            "fileLocation": "http://images.clipartpanda.com/sports-equipment-clipart-black-and-white-soccer-ball-hi.png",
            "username": "testuser3",
            "description": "The company required the 28-year-old's help on a matter the directors felt could affect the share price: its Wikipedia page. Short, uninteresting ."
        },
        {
            "fileLocation": "http://images.clipartpanda.com/sports-equipment-clipart-black-and-white-soccer-ball-hi.png",
            "username": "Sumanth",
            "description": "Sample"
        },
        {
            "fileLocation": "http://images.clipartpanda.com/sports-equipment-clipart-black-and-white-soccer-ball-hi.png",
            "username": "as",
            "description": "as"
        }
    ]
  }
}

JSON is assigned to variable data

My Angularjs Controller:

 myAppDirectives.
  controller('MainCtrl', function ($scope,$http,dateFilter) {
  $http({ method: 'GET', url: 'http://localhost:8087/sportsrest/binaries/' }).success(function (data) {
   var result = data;
     var json=JSON.stringify(result);
     var data = JSON.parse(json);
     $scope.cart = data; // response data 
 }).
 error(function (data) {
     alert("error" + data);
     console.log(data);
 });
});

My HTML page:

<html lang="en" ng-app="myApp" id="ng-app">
<body ng-controller="MainCtrl">
  <article class="main-content" role="main">
    <section class="row">
      <div class="content">
        <div class="bookmarks-list">
          <ul>
             <li ng-repeat="data">
                 <h3>{{cart._embedded.binaries.username}}</h3>
                 <img ng-src="{{cart._embedded.binaries.fileLocation}}"/>
             </li>
           </ul>
        </div>
      </div>
    </section>
  </article>    
</body>
</html>

Can Anyone please help me How to iterate through All the images on JSON object and show on HTML page.

Thanks in Advance.

@ijada thanks for replay. i assigned json stored in data to $scope.cart in my controller code above — MAK
– MAK, Commented Mar 2, 2015 at 7:03

Darin Dimitrov · Accepted Answer · 2015-03-02 07:09:42Z

4

Your ng-repeat is not on the correct variable. It should be on the cart._embedded.binaries array:

<li ng-repeat="item in cart._embedded.binaries">
    <h3>{{item.username}}</h3>
    <img ng-src="{{item.fileLocation}}"/>
 </li>

Also in your controller you probably don't need to parse the data:

$http({ method: 'GET', url: 'http://localhost:8087/sportsrest/binaries/' }).success(function (data) {
     $scope.cart = data; // response data 
})

edited Mar 2, 2015 at 7:09

answered Mar 2, 2015 at 7:04

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

6 Comments

MAK Over a year ago

thanks for replay.it is not working. Do i need to change anything in controller

Darin Dimitrov Over a year ago

Yes, I have updated my answer to illustrate what you might try changing in the success callback of your AJAX request.

MAK Over a year ago

@darvin It is showing empty html page. Do i need to assign $scope.item=data; in my controller?

Darin Dimitrov Over a year ago

Have you checked for potential errors in the Console?

Darin Dimitrov Over a year ago

Inside the success callback if you add console.log(data); can you see the correct JSON printed in the console?

|

iJade · Accepted Answer · 2015-03-02 08:00:34Z

1

ngRepeat directive has not been used properly.

This should work for you ..

In the HTML code:

<li ng-repeat="item in cart._embedded.binaries">
             <h3>{{item.username}}</h3>
             <img ng-src="{{item.fileLocation}}"/>
 </li>

Here is a DEMO

edited Mar 2, 2015 at 8:00

answered Mar 2, 2015 at 7:03

iJade

23.9k58 gold badges163 silver badges250 bronze badges

5 Comments

iJade Over a year ago

@Ashokkumar updated the code with a DEMO. If it's still not working for you, then I would suggest checking your JSON, if its, as you have mentioned in your question

Jonathan Over a year ago

Your demo code differs from the code you used in the answer, this might confuse.

MAK Over a year ago

@ijade thanks for replay, i will try it and inform you

MAK Over a year ago

@ijade thanks for replay. once i will try and get back to you

MAK Over a year ago

@ijade thanks for your support and replay.. your DEMO helped me. Thank you once again. Keep rocking

Collectives™ on Stack Overflow

How to show images retrieved from JSON on page using Angular.js

2 Answers 2

6 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related