Angularjs filter isn't working with json data

Question

I'm using simple Angularjs filter where you can filter items in the list with the help of input. I put the code here http://plnkr.co/edit/6vDeOiGNGbblkCBOi8B7?p=preview Filter does work as intended, but if I move data from controller to json and then parse it like that

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

Json data renders in the ng-repeat list, but filter search doesn't work anymore. How can I apply filter with json data?

I also added json file I wanted to use to the same plunker.

What's wrong with your filter?, it seems to me that it's working just fine. — Josep
– Josep, Commented Sep 26, 2014 at 0:19

Jason Li · Accepted Answer · 2014-09-26 01:07:19Z

2

Your json file is an object instead of an array. So you'd better change it to an array, or

myApp.controller('CompaniesController', ['$http', '$scope', 
  function($http,$scope) {
    $http.get('companies.json').success(function(data) {
        var companies = [];
        // make the object to an array
        for(var companyName in data) {
          companies.push(data[companyName]);
        }
         $scope.companies = companies;
    });
  }
]);

answered Sep 26, 2014 at 1:07

Jason Li

1,5851 gold badge12 silver badges20 bronze badges

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

Comments

a8m · Accepted Answer · 2014-09-26 08:23:57Z

0

You can simply turn it to array with toArray filter of angular.filter module.
Usage: object | toArray: addKey[optional]

Note: if addKey set to true,the filter also attaches a new property $key to the value containing the original key that was used in the object we are iterating over to reference the property.

Example:

  <input ng-model="model" type="text"/>
  <ul>
    <li ng-repeat="comp in companies | toArray | filter:model">
      {{ comp }}
    </li>
  </ul>

answered Sep 26, 2014 at 8:23

a8m

9,4844 gold badges39 silver badges41 bronze badges

1 Comment

vitalym Over a year ago

Thanks, didn't know about this possibility. I should definitely dive into filters more carefully.

Collectives™ on Stack Overflow

Angularjs filter isn't working with json data

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related