javascript - AngularJS:获取具有特定id的数据

Question

我正在尝试通过产品 ID 从包含产品的 JSON 文件中获取特定产品。我有一些问题，就像这个问题 AngularJS : get back data from a json array with an id 代码是类似的。我通读了那个问题和那里接受的答案，仍然无法弄清楚这一点。据我了解， $scope.search() 返回一个 promise ，成功后触发 .then() 设置获取正确的人。

这行代码打印出产品数组，并从 URL 中获取产品 ID。 但是它在控制台中打印两次。

console.log($scope.products + $routeParams.productId);

app.js

var app = angular.module('gtbApp', [
    'ngRoute',
    'productControllers'
]);

// Setting up the routes with right controllers and partials
app.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/main', {
            templateUrl: 'partials/product-grid.html',
            controller: 'ProductController'
        })
        .when('/product/:productId', {
            templateUrl: 'partials/product-detail.html',
            controller: 'ProductDetailCtrl'
        })
        .otherwise({
            redirectTo: '/main'
        });

}]);

Controller .js

var app = angular.module('productControllers', []);

// For product-grid.html
app.controller('ProductController', ['$http', function($http){
    var store = this;
    store.products = [];    
    $http.get('products.json').success(function(data){
        store.products = data;
    });

}]);

// For product-detail.html
app.controller('ProductDetailCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http){

$scope.search = function() {
    var url = 'products.json';
    // Return a promise object
    return $http.get(url).success(httpSuccess).error(function(){
        console.log('Unable to retrieve info form JSON file.');
    });
}

httpSuccess = function(response) {
    $scope.products = response;
}

function getById(arr, id) {
    for (var i = 0, len = arr.length; i < len; i++) {
        if (arr[i].id === id) {
            return arr[i];  
        }
    }
}

$scope.search().then(function(){
    // Prints out the products array and id twice
    console.log($scope.products + $routeParams.productId);
    $scope.product = getById($scope.products, $routeParams.productId);
    // Prints out twice "undefined"
    console.log($scope.product); 
});

}]);

主要问题是如何根据“ProductDetailCtrl”中的 id 获取特定产品

$scope.product = getById($scope.products, $routeParams.productId); 

不起作用。

提前致谢!

更新: 发现为什么 $scope.product 未定义，这只是因为 $routeParams.productId 是一个字符串，而在 getById() 中第二个参数需要一个整数。 但是我不知道为什么 console.log($scope.product);打印两次。

Answer 1

我不太明白你的主要问题是什么。但无论如何。当您使用 $http 服务时，它将返回一个 promise ，您最终必须解开它。您在代码中所做的是将其展开两次。这很好。

对于 $http 响应，您可以使用“success”/“error”或仅使用“then”，后者可以接受成功和错误回调。这意味着您可以在搜索函数中解包，也可以在调用搜索函数之后解包。

$scope.search = function() {
    var url = 'products.json';
    $http.get(url)
         .success(function(data){
             $scope.product = getById($scope.products, $routeParams.productId);
         })
         .error(function() {
            console.log('Unable to retrieve info form JSON file.');
         });
}

您还可以执行以下操作:

$scope.search = function() {
    var url = 'products.json';
    return $http.get(url);
}

$scope.search().then(function(data) {
    $scope.product = getById(data, $routeParams.productId);
}, errorCallback);

下面的代码会达到相同的结果

$scope.search = function() {
    var url = 'products.json';
    return $http.get(url);
}

$scope.search()
      .success(function(data) {
          $scope.product = getById(data, $routeParams.productId);
      })
      .error(errorCallback);

或引用 promise :

$scope.search = function() {
    var url = 'products.json';
    return $http.get(url);
}

var dataPromise = $scope.search();

dataPromise.then(function(data) {
    $scope.product = getById(data, $routeParams.productId);
}, errorCallback);

您需要知道的是，只要您在 success/error/then 函数中返回某些内容，它就会返回一个 Promise，您必须解开该 Promise 才能获取数据。