Angular JS:根据 id 检索 json 数据

Angular JS: retrieve json data based on id

本文关键字：检索 json 数据 id 根据 JS Angular      更新时间：2023-09-26

我有一个项目列表。当您单击一个项目时，它会识别其 ID 并将您带到其相应的页面 localhost：8000/products/1。

但是，如何仅获取该产品/物料 ID 的其余信息？

我的 json 数据如下所示...

[
  {
    "id": "1",
    "title": "Chips",
    "subTitle": "Snack",
    "imgUrl": "chips.png",
    "demoImgUrl": "snacks.png",
    "brandLogoUrl": "somebrand.png"
  },
...

我的产品列表.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);
    });
  }
})();

和我的项目.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);
    });
  }
})();

和我的html项目.html（不呈现标题或imgUrl）

<div>
  <p>itemId: {{$ctrl.itemId}}</p>
  <p>{{$strl.title}}</p>
  <img src="{{$ctrl.imgUrl}}" />
</div>

我得到了

角度.js：13236 参考错误：未定义产品服务

那么如何仅显示基于 json 数据项 ID 的信息呢？

您可以使用

$filter通过任何属性检索所需的对象。它的语法是 $filter('filter')(vm.products, { Id: 1 }) . vm.products数据只不过是对象列表，它将返回 Id 为 1 的所有对象的列表。

相关文章：