Angularjs$http.get()。 JSON 来自服务器

Question

我尝试显示部分服务器列表，但不明白为什么他没有将它们写入 array.I 尝试将其推送到数组然后在 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

它实际上不为空，如果您看到网络选项卡，则响应带有 1 个元素。它显示为空，因为在调用成功回调时，console.log 语句已经以初始值执行作为 [].

我知道那么为什么它第一次显示 1 个元素，不管你信不信打开它们或类似的东西后记录。我以前遇到过同样的问题，并在其中一个答案中找到了这个东西。

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

Answer 2

此代码将解决您的问题：

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），因为您在 for 循环中一遍又一遍地重置 obj.fetchUserDetails。我所做的是将 for 循环移动到 fetchUserDetails 中，并将每次调用的所有承诺收集到 $q.all() 的单个承诺中。新的统一承诺已在 customersCtrl 中使用。一旦所有的承诺都得到解决，统一的承诺就会生效。

Angularjs$http.get()。 JSON 来自服务器

Angularjs $http.get(). JSON fron server

javascript

json

http

factory-pattern

angularjs