我正在尝试通过包含产品的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/