Angular, json fetch list and filter

Question

Ok, this is simple i think, but i havent tried this with json file. So the thing is that im now retrieving a whole json list like this json file: workers.json

[{
  “workarea”: [“office”, “transport”, “IT”],
  “picture”: “some url”,
  “name”: “Mark janken”,
  “age”: 30,
  “location”: “holland”,
}]

And in my angular controller, im doing this right now and it works.

myApp.controller('MainController', function($scope, $http) {

  $http.get('workers.json')
    .success(function(data){
    $scope.workers = data;
    });

});

But what if i should fetch a filter and list like this on the client side?? and have multiple filters, just like this: /get-workers?location=:location

not sure how to aproach this.

Hope for some help or links. Thanks.

wait, is get-customers is diff from workers? If yes, please add code for it — Varit J Patel
– Varit J Patel, Commented Jul 13, 2016 at 8:52
Ups, sorry, no it is the same file, only one json file with data. I have just edited it now. — user3503728
– user3503728, Commented Jul 13, 2016 at 8:54
@user3503728 in order to correctly achieve this (meaning that you'll need to get some dynamic data from the URL you need to access router params. Check my answer for some code examples and feel free to ask anything — Vassilis Pits
– Vassilis Pits, Commented Jul 13, 2016 at 9:19

Vassilis Pits · Accepted Answer · 2016-07-13 09:13:59Z

1

If you want to do this client side you need to introduce router in your project.

So after you introduce router (I prefer ui-router)

You will have something like this in your states/routes configuration:

$stateProvider
  .state('workers', {
     url: '/workers/:myFilter',
     ...
  })

And then in your controller using $stateParams you can reach this parameter simply like $stateParams.myFilter

For example your controller will look like this:

myApp.controller('MainController', 
  function($scope, $http, filterFilter) {

      $http.get('workers.json')
        .success(function(data){
           $scope.workers = data;
           $scope.filteredWorkers = 
             filterFilter($scope.workers, {
               location:$stateParams.myFilter
           });
        });

});

Check more in the docs, it's really easy.

edited Jul 13, 2016 at 9:13

answered Jul 13, 2016 at 9:08

Vassilis Pits

3,8484 gold badges35 silver badges49 bronze badges

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

Comments

Raymond Ativie · Accepted Answer · 2016-07-13 09:08:03Z

0

If it's getting the value from a server, that can be handles from the server side. Using the query string to filter the data on the server side.

But if you are geting the list from a json file, you have to filter the list after you have retrieved it

myApp.controller('MainController', function($scope, $http, filterFilter) {

  $http.get('workers.json')
    .success(function(data){
       $scope.workers = data;
       $scope.filteredWorkers = filterFilter($scope.workers, {location:'holland'});
    });

});

edited Jul 13, 2016 at 9:08

answered Jul 13, 2016 at 8:57

Raymond Ativie

1,8583 gold badges28 silver badges51 bronze badges

2 Comments

user3503728 Over a year ago

Yes. Im only getting the list from a json file, no server, backend for this.

Raymond Ativie Over a year ago

@user3503728 I've added a code sample to show how you can achieve this

Collectives™ on Stack Overflow

Angular, json fetch list and filter

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related