title: How to show images retrieved from JSON on page using Angular.js
body: <p>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.</p>
  
  <p>Here is my code:</p>
  
  <p>My JSON </p>
  
  <pre><code>{
    "_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"
          }
      ]
    }
  }
  </code></pre>
  
  <p>JSON is assigned to variable data</p>
  
  <p>My Angularjs Controller:</p>
  
  <pre><code> 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);
   });
  });
  </code></pre>
  
  <p>My HTML page:</p>
  
  <pre><code>&lt;html lang="en" ng-app="myApp" id="ng-app"&gt;
  &lt;body ng-controller="MainCtrl"&gt;
    &lt;article class="main-content" role="main"&gt;
      &lt;section class="row"&gt;
        &lt;div class="content"&gt;
          &lt;div class="bookmarks-list"&gt;
            &lt;ul&gt;
               &lt;li ng-repeat="data"&gt;
                   &lt;h3&gt;{{cart._embedded.binaries.username}}&lt;/h3&gt;
                   &lt;img ng-src="{{cart._embedded.binaries.fileLocation}}"/&gt;
               &lt;/li&gt;
             &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    &lt;/article&gt;    
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can Anyone please help me How to iterate through All the images on JSON object and show on HTML page.</p>
  
  <p>Thanks in Advance.</p>