Angularjs http.get美元().来自服务器的JSON

Question

我试图显示服务器列表的一部分，但不明白为什么他没有将它们写入数组。我尝试将它推入数组，然后在html中显示它使用ng-repeat，但它不起作用，因为我没有尝试过。

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>

我尝试了不同的方法，但结果都是一样的，不明白我做错了什么?

Answer 1

下面的代码将解决您的问题:

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>

你设置fetchUserDetails只获取最后一项(id: 15)，因为你重置了obj。在for循环中反复fetchUserDetails。我所做的是将for循环移动到fetchUserDetails中，并通过$q.all()将每个调用的所有承诺收集到单个承诺中。新的统一承诺已在customersctl中使用。一旦所有的承诺都解决了，统一的承诺就会生效。

Answer 2

它实际上不是空的，如果你看到网络选项卡的响应是一个元素…它显示为空，因为在调用成功回调时，console.log语句已经被执行，初始值为[]。

我知道为什么它第一次显示1个元素，因为不管你信不信，chrome的开发者工具的控制台行为有点不同，它在你打开它们或类似的东西后评估你的日志。我以前遇到过同样的问题，并在其中一个答案中发现了这个问题。

只是为了证明在Firefox中运行这个，你总是会发现日志为空数组