Angularjs $ http.get（）。 JSON前端服務器

我試圖顯示部分服務器列表，但不明白他爲什麼沒有將它們寫入到數組中。我嘗試將它推送到數組，然後使用ng-repeat將其顯示在html 中，但它不是因爲我沒有嘗試過，所以沒有工作。

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>

我嘗試不同的方法，但結果是一樣的，不明白我AMAS做錯了嗎？

來源

2015-07-12 Jaro

'console.log（Picture.list）;'記錄什麼？ –

當我首先運行它有1個項目，但是當我重新加載它是空的，但仍然顯示結果 – Jaro

它實際上不是空的，如果你看到網絡標籤響應來了1個元素..它顯示空，因爲到時間成功回調稱爲console.log語句已經以'[]'初始值執行。我知道_爲什麼它第一次顯示1個元素，以及因爲不相信開發者工具的控制檯行爲奇怪，它會在打開它們之後評估您的日誌。我以前遇到過同樣的問題，並在其中一個答案中找到了這個問題。 – vinayakj

此代碼將解決您的問題：

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 \t 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.fetchUserDetails並重新進入for循環。我所做的是在fetchUserDetails中移動for循環，並通過$ q.all（）將每個調用的所有承諾收集成單個承諾。客戶使用新的統一承諾。一旦所有的承諾得到解決，統一承諾就會生效。

來源

2015-07-12 15:54:25

它實際上並不空，如果你看到網絡標籤，響應來了1個元素..它顯示爲空，因爲在調用成功回調時，console.log語句已經以[]的初始值執行。

我知道那麼爲什麼它第一次顯示1個元素，以及因爲不相信chrome的開發者工具的控制檯的行爲有點不同，它會在你打開它們之後評估你的日誌或類似的東西。我以前遇到過同樣的問題，並在其中一個答案中找到了這個問題。

只是爲了證明在Firefox中運行這個，你總是會發現日誌爲空數組。

來源

2015-07-12 15:42:10 vinayakj

Angularjs $ http.get（）。 JSON前端服務器

回答

相關問題