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

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": ".png",
            "username": "testuser3",
            "description": "The pany required the 28-year-old's help on a matter the directors felt could affect the share price: its Wikipedia page. Short, uninteresting ."
        },
        {
            "fileLocation": ".png",
            "username": "Sumanth",
            "description": "Sample"
        },
        {
            "fileLocation": ".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.

Here is my code:

My JSON

{
  "_embedded": {
    "binaries": [
        {
            "fileLocation": "http://images.clipartpanda./sports-equipment-clipart-black-and-white-soccer-ball-hi.png",
            "username": "testuser3",
            "description": "The pany 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./sports-equipment-clipart-black-and-white-soccer-ball-hi.png",
            "username": "Sumanth",
            "description": "Sample"
        },
        {
            "fileLocation": "http://images.clipartpanda./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.

Share Improve this question edited Dec 11, 2016 at 4:11 gp. 8,2253 gold badges42 silver badges41 bronze badges asked Mar 2, 2015 at 6:59 MAK 3902 gold badges8 silver badges25 bronze badges

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

Add a ment |

2 Answers 2

Sorted by: Reset to default 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 
})

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to show images retrieved from JSON on page using Angular.js - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)