[英]Angular JS: retrieve json data based on id
I have a list of items.我有一个物品清单。 When you click on an item it recognizes its id and takes you to its corresponding page localhost:8000/products/1.
当您单击某个项目时,它会识别其 ID 并将您带到其对应的页面 localhost:8000/products/1。
But how do I get the rest of the information just for that one product/item id?但是,如何仅获取该产品/项目 ID 的其余信息?
My json data looks like this...我的json数据看起来像这样......
[
{
"id": "1",
"title": "Chips",
"subTitle": "Snack",
"imgUrl": "chips.png",
"demoImgUrl": "snacks.png",
"brandLogoUrl": "somebrand.png"
},
...
my productList.js where it successfully shows the list of products我的productList.js成功显示了产品列表
(function() {
'use strict';
angular
.module('testProducts')
.component('productList', {
templateUrl: '/components/productList/productList.html',
controller: ProductListController
});
ProductListController.$inject = ['ProductsService'];
function ProductsListController(ProductsService) {
var vm = this;
vm.products = [];
// Get the Products data
ProductService.getData().then(function(response) {
console.log(response.data);
vm.products = response.data;
}).catch(function(err) {
console.error('Error', err);
});
}
})();
and my item.js where it should grab the json for that one id和我的item.js ,它应该为那个 id 获取 json
(function() {
'use strict';
angular
.module('testProducts')
.controller('itemController', ItemController);
ItemController.$inject = ['$state', '$stateParams', 'ProductsService'];
function ItemController($state, $stateParams, ProductsService) {
var vm = this;
vm.itemId = $stateParams.itemId;
console.log($stateParams.itemId);
// Get the Product data
ProductsService.getData().then(function(response) {
console.log(response.data);
}).catch(function(err) {
console.error('Error', err);
});
}
})();
And my html item.html (which does not render title or imgUrl)还有我的 html item.html (不呈现标题或 imgUrl)
<div>
<p>itemId: {{$ctrl.itemId}}</p>
<p>{{$strl.title}}</p>
<img src="{{$ctrl.imgUrl}}" />
</div>
I've gotten我得到了
angular.js:13236 ReferenceError: ProductService is not defined
angular.js:13236 ReferenceError: ProductService 未定义
So how do I just display the information based on the json data item id?那么如何只显示基于json数据项id的信息呢?
You can use $filter
to retrieve desired object based using any property.您可以使用
$filter
使用任何属性检索所需的对象。 Its syntax is $filter('filter')(vm.products, { Id: 1 })
.它的语法是
$filter('filter')(vm.products, { Id: 1 })
。 vm.products
is the data nothing but list of objects and it will return list of all objects which has Id 1. vm.products
只是对象列表的数据,它将返回所有 Id 为 1 的对象的列表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.