使用ng-repeat從對象的http響應數組中檢索數據

Question

我試圖從我的控制器中使用HTTP獲取請求從laravel API檢索響應，並通過ng-repeat循環查看視圖中的所有數據，在控制檯中響應但不在視圖中顯示任何內容。 這是我的JSON對象：

[ 
{ 
    "id":1, 
    "product_id":"ABCly119", 
    "name":"Shirt", 
    "category_id":"fashion", 
    "color":"Grey", 
    "size":"L", 
    "brand":"Tims", 
    "type":"Polo", 
    "price":11000, 
    "main_image":null, 
    "vat":null, 
    "description":"A very good shirt", 
    "product_condition":"new", 
    "created_at":"2017-07-31 14:36:17", 
    "updated_at":"2017-07-31 15:37:21"}, 
{ 
    "id":2, 
    "product_id":"ABCly139", 
    "name":"Shirt", 
    "category_id":"fashion", 
    "color":"Black", 
    "size":"M", 
    "brand":"Tims", 
    "type":"Polo", 
    "price":10000, 
    "main_image":null, 
    "vat":null, 
    "description":"A very good shirt", 
    "product_condition":"new", 
    "created_at":"2017-07-31 14:39:47", 
    "updated_at":"2017-07-31 14:39:47"}, 
{ 
    "id":3, 
    "product_id":"ABCly139", 
    "name":"Shirt", 
    "category_id":"fashion", 
    "color":"Blue","size":"S", 
    "brand":"Tims", 
    "type":"Polo", 
    "price":12000, 
    "main_image":null, 
    "vat":null, 
    "description":"A very good shirt", 
    "product_condition":"new", 
    "created_at":"2017-07-31 14:41:06", 
    "updated_at":"2017-07-31 14:41:06" 
    } 
] 

這是我的控制器

angular 
.module('productsController',[]) 
.constant('baseUrl', 'http://127.0.0.1:8000/api/product') 
.controller('productCtrl',['$scope','$log','$http','baseUrl','$rootScope',function($scope,$log,$http,baseUrl,$rootScope){ 
    $log.info('Product controller loaded'); 

    $http.get(baseUrl + '/fetch') 
     .then(function (response){ 
      $scope.response = response; 

      var i = $scope.response; 

      angular.forEach(i, function(item){ 
       $scope.product = item; 
       console.log($scope.product);  
      }); 


      return response.data; 
     },function (error){ 
      $scope.error = error; 
      $log.info($scope.error); 
     }); 
}]); 

這是我的視圖

<ul> 
    <li ng-repeat="x in products"> 
     <span>{{x[0].name}}</span> 
    </li>      
</ul> 

我嘗試使用上面的代碼它記錄到控制檯，但不顯示上視圖

Answer 1

$ scope.product =項目將覆蓋所有項目，除了我數組的最後一個項目，您做的更好下面

$scope.products=[]; 
    angular.forEach(i, function(item){ 
     $scope.products.push(item); 
    }); 

<ul> 
    <li ng-repeat="x in products"> 
     <span>{{x.name}}</span> 
    </li>      
</ul> 

或低於標記打印這種方式name屬性

的所有值

<ul> 
    <li ng-repeat="x in response.data"> 
     <span>{{x.name}}</span> 
    </li>      
</ul> 

Answer 2

有沒有$ scope.products，只需$ scope.product，試試

<ul> 
    <li ng-repeat="x in response"> 
     <span>{{x[0].name}}</span> 
    </li>      
</ul> 

Answer 3

控制器更改爲：

angular 
.module('productsController',[]) 
.constant('baseUrl', 'http://127.0.0.1:8000/api/product') 
.controller('productCtrl',['$scope','$log','$http','baseUrl','$rootScope',function($scope,$log,$http,baseUrl,$rootScope){ 
    $log.info('Product controller loaded'); 

    $http.get(baseUrl + '/fetch') 
     .then(function (response){ 
      $scope.products = response 
     },function (error){ 
      $log.info(error); 
     }); 
}]); 

和你的看法：

<ul> 
    <li ng-repeat="x in products"> 
     <span>{{x.name}}</span> 
    </li>      
</ul> 

你應該很好去。