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

Its not empty actually , If you see the network tab the response is coming with 1 element.. its showing empty because by the time success callback is called the console.log statement is already getting executed with initial value as [].

I know then why it showed 1 element first time , well because believe it or not the chrome's developers tool's console behaves bit differently, it evaluates your logs after you open them or something like that. I have came across with same question before and found this thing in one of the answer.

Just for proof run this in Firefox and you would always find the log as empty array.

Answer 2

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.