Search a JSON file for a specific object in an Array in AngularJS

Question

I'm new to using Angular and I'm having trouble with a specific part of a project I'm working on. For one of the templates I want to use information from a JSON file of different stores to display only information about the store whose page a user is currently on.

I'm trying to filter out the store by using $routeParams (since the store ID is how I'm doing the routing), but my filter just returns an empty array.

My routing looks like this:

myProto.config(['$routeProvider', 
    function($routeProvider) {
  $routeProvider.
     when('/home', {
         templateUrl: 'partials/merchants.html',
         controller: 'merchantListCtrl'
     }).
     when('/:merchantId', {
        templateUrl: 'partials/deals.html',
        controller: 'dealListCtrl'
     }).
     otherwise({redirectTo: '/home'});
}]);

And my service to read the JSON file looks like this:

var rmnProtoServices = angular.module('rmnProtoServices', ['ngResource']);

merchantProtoServices.factory('Merchant', ['$resource',
   function($resource){
      return $resource('merchants/merchants.json', {}, {
         query: {method:'GET', isArray:true}
      });
}]);

THe JSON file I'm pulling form looks like this: [

   {
        "id": "kohls",
        "name": "Kohls",
    },

    {
        "id": "best-buy",
        "name": "Best Buy",
    }

]

Finally the filter I'm running in the controller looks like this:

var merchants = Merchant.query();

$scope.merchant = $filter('filter')(merchants, {id: $routeParams.merchantId});

What I'd like it to do is return an array of all merchants with that ID (my next step will be to select the first object in that array, as it should just contain a single merchant). Instead it just returns an empty array.

How can I go about actually getting this filter to work (or is there some better method I should be using)?

score 0 · Accepted Answer · answered Sep 24 '14 at 19:38

Merchant.query() is async call and you trying to filter merchants before you get response from your server please try code below.

var merchants = Merchant.query()
    .$promise.then(function(merchants) {
     $scope.merchant = $filter('filter')(merchants, {id: $routeParams.merchantId});
    });

score 0 · Answer 2 · edited May 23 '17 at 12:21

Apart from the answer given by @sss

Also, you may consider moving the query to the resolve block of your route:

myProto.config(['$routeProvider', 'Merchant', 
    function($routeProvider, Merchant) {
  $routeProvider.
     when('/home', {
         templateUrl: 'partials/merchants.html',
         controller: 'merchantListCtrl'
     }).
     when('/:merchantId', {
        templateUrl: 'partials/deals.html',
        controller: 'dealListCtrl',
        resolve:{
            merchants: function () {
                return Merchant.query();
            }
        }
     }).
     otherwise({redirectTo: '/home'});
}]);

This way angular will delay changing the route until the query promise is resolved, and you can use the array in your controller at once:

function GenericController ($scope, $filter, $routeParams, merchants) {
    $scope.merchant = $filter('filter')(merchants, {id: $routeParams.merchantId});
}

Here's more on this: Delaying AngularJS route change until model loaded to prevent flicker

Search a JSON file for a specific object in an Array in AngularJS

2 Answers2