我正在尝试通过包含产品的JSON文件通过其ID获取特定产品。我有这样的问题
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'
        });

}]);


controllers.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);
});

}]);


主要问题是如何基于id获取特定产品,为什么在“ ProductDetailCtrl”中

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


不起作用。

提前致谢!

更新:
找出$ scope.product为什么未定义的原因,仅仅是因为$ routeParams.productId是一个字符串,并且在getById()中第二个args需要一个整数。
但是我不知道为什么console.log($ scope.product);打印两次。

最佳答案

我真的不明白您的主要问题是什么。但是无论如何。当您使用$ http服务时,它将返回一个诺言,最终您将必须解开该诺言。您在代码中执行的操作是将其展开两次。没关系

使用$ 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);


或参考诺言:

$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);


您需要知道的是,只要您在成功/错误/然后函数内返回某项内容,它就会返回一个承诺,您必须将其解包才能获取数据。

关于javascript - AngularJS:检索具有特定id的数据,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26486816/

10-11 09:11
查看更多