Search code examples
angularjsangular-filters

Angularjs working with $filter filter


I'm trying to use $filter to filter dataset retrieved from a JSON file within a controller. here is the data in the JSON file:

[{
    "keyword": "key1",
    "path": "path1"
}, {
    "keyword": "key2",
    "path": "path2"
}, {
    "keyword": "key3",
    "path": "path3"
}, {
    "keyword": "key4",
    "path": "path4"
}, {
    "keyword": "key5",
    "path": "path5"
}]

Then I get the data within my controller like this:

$http.get('/sampleJson.txt').then(function (response) {
    vm.resultSet=response.data;
});

and then I use $filter to filter the data:

vm.results=$filter('filter')(vm.resultSet, {keyword: "key1"});

Finally I use ng-repeat to show the data in the view:

<tbody>
    <tr ng-repeat="result in vm.results">
    <td><a href="{{result.path}}">{{result.keyword}}</a></td>
   <td>{{result.keyword}}</td>
   </tr>
</tbody>

However the results variable is empty and nothing shows up. It seems to be pretty basic stuff, however I can not figure out what is wrong? PS: When I declare other variables in the controller like :

vm.message="Hello, Angular!"

It shows up in the view.


Solution

  • I wrote a solution using $scope. The filter in this solution works. I don't know why you use vm but the $http service works asincronously, and the line

    vm.results=$filter('filter')(vm.resultSet, {keyword: "key1"});
    

    should be in the body of the then() function.

    Here is a plunk

    https://plnkr.co/edit/gwx90oN0cf62JuUF5t2k?p=preview