Angular JS: retrieve json data based on id

Question

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.

But how do I get the rest of the information just for that one product/item id?

My json data looks like this...

[
  {
    "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

(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

(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)

<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

So how do I just display the information based on the json data item id?

You inject ProductsService not ProductService, you hava a typo. — emre nevayeshirazi
– emre nevayeshirazi, Commented Mar 16, 2016 at 21:01
@emrenevayeshirazi Good catch! thank you :) However I still don't know how to grab that specific id json data. — Modelesq
– Modelesq, Commented Mar 16, 2016 at 21:03

kvorobiev · Accepted Answer · 2016-03-16 21:08:27Z

1

You can use $filter to retrieve desired object based using any property. Its syntax is $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.

edited Mar 16, 2016 at 21:08

kvorobiev

5,0704 gold badges32 silver badges36 bronze badges

answered Mar 16, 2016 at 20:59

Rakesh Nalumachu

2281 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Modelesq Over a year ago

Got filter to work. However I still don't know how to throw it into my template. :\

Collectives™ on Stack Overflow

Angular JS: retrieve json data based on id

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related