Question

Angular-无法解析前端的json响应

2015-10-08

465

json angularjs

我使用以下代码创建了一个 httpRequest 来获取一些项目：

factory.getBanners = function() {
    $http({
      method: 'GET',
      url: 'http://localhost:2100/v1/items/getBanners'
    }).then(function successCallback(response) {
      console.log(response);
      return response;
    });
  };

在控制器中，我按如下方式处理它：

store.controller('bannerCtrl', ['$scope', 'productService', function($scope, productService){
  $scope.init = function() {
    $scope.banners = productService.getBanners();
  }
  $scope.init();
}]);

在前端，我尝试使用

<div ng-controller="bannerCtrl">
    <div data-ng-repeat="banner in banners">
        <li> {{banner.bannerAltText}} </li>
    </div>
</div>

显示数据，但它没有显示任何内容。控制台上也没有出现任何错误。我该如何解决这个问题。这里的 banners 是一个数组，其每个元素都包含 bannerAltText。

Answer 1

您的 getBanners 函数没有按您想象的方式工作。它什么都没有返回。 then 函数中的 return 语句仅从该 then 函数返回，而不是从 getBanners 返回。问题是您试图以同步方式使用异步函数。相反，让 getBanners 返回一个承诺：

factory.getBanners = function() {
    return $http({
        method: 'GET',
        url: 'http://localhost:2100/v1/items/getBanners'
    }).then(function successCallback(response) {
        return response.data;
    });
};

并在您的控制器中使用该承诺：

$scope.init = function() {
    productService.getBanners().then(function(banners) {
        $scope.banners = banners;
    });
}
$scope.init();

Answer 2

.then() 中的 return 将是一个承诺，而不是数据。这里有一个更好的构建代码的方法

factory.getBanners = function() {
    return $http({
      method: 'GET',
      url: 'http://localhost:2100/v1/items/getBanners'
    });
  };

.

store.controller('bannerCtrl', ['$scope', 'productService', function($scope, productService){
  $scope.init = function() {
    productService.getBanners()
    .then(function(response) {$scope.banners = response.data});
  }
  $scope.init();
}]);