Angularjs $http.get(). JSON fron server

Question

I try to show part of server list, but does not understand why he had not written them to the array.I try to push it to array and then display it in html using ng-repeat, but it's doesn't work as it I have not tried.

var app = angular.module('myApp', []);
app.factory("demoFac", ['$http',function($http){
    var obj = {};
    for(id = 10; id < 16; id++){
        obj.fetchUserDetails = function(){
            return $http.get('http://jsonplaceholder.typicode.com/photos/' + id);
        }
        return obj;
    }

}]);

app.controller('customersCtrl',function(demoFac){
    var Picture = this;

    Picture.list = [];

    demoFac.fetchUserDetails().success(function(response){
        Picture.list.push({id: response.id,title:response.title, url: response.url, thumbnailUrl: response.thumbnailUrl})
    });

    console.log(Picture.list);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl as Picture" ng-cloak> 
    <div ng-repeat="x in    Picture.list ">
    <h4>{{'id:'+x.id}}</h4>

    <h3>{{x.title}}</h3>
    <h4>{{x.url}}</h4>
    <h4>{{x.thumbnailUrl}}</h4>
    <img ng-src="{{x.thumbnailUrl}}">
    <img ng-src="{{x.url}}">
</div>
</div>

I tried different ways but the result is the same, do not understand what I amas doing wrong ?

Answer 1

This code will solve your issue:

var app = angular.module('myApp', []);
app.factory("demoFac", ['$http', '$q',
  function($http, $q) {
    var obj = {};

    obj.fetchUserDetails = function() {
      var promises = [];
      for (id = 10; id < 16; id++) {
        var promiss = $http.get('http://jsonplaceholder.typicode.com/photos/' + id);
        promises.push(promiss);
      }
      return $q.all(promises);
    }
    return obj;
  }
]);

app.controller('customersCtrl', ['demoFac',
  function(demoFac) {
    var Picture = this;

    Picture.list = [];

    demoFac.fetchUserDetails().then(function(response) {
      for (var i = 0; i < response.length; i++) {
        Picture.list.push({
          id: response[i].data.id,
          title: response[i].data.title,
          url: response[i].data.url,
          thumbnailUrl: response[i].data.thumbnailUrl
        });
      }
    });

    console.log(Picture.list);
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl as Picture" ng-cloak>
  <div ng-repeat="x in 	Picture.list ">
    <h4>{{'id:'+x.id}}</h4>

    <h3>{{x.title}}</h3>
    <h4>{{x.url}}</h4>
    <h4>{{x.thumbnailUrl}}</h4>
    <img ng-src="{{x.thumbnailUrl}}">
    <img ng-src="{{x.url}}">
  </div>
</div>

You were setting the fetchUserDetails to only fetch the last item (with id: 15) because you were resetting the obj.fetchUserDetails over and over again in for loop. What I did was to move the for loop inside fetchUserDetails and collect all promises for each call into a single promise by $q.all(). The new unified promise has been used in customersCtrl. The unified promise will work once all promises has been resolved.