CODEWITHSUNDEEP
javascriptjsonangularjsfilter
Chad Watkins
Chad Watkins

Reputation: 561

filter not working in angularjs for JSON data

I apologize if this has been answered beforehand I searched but couldn't understand the answers on other stack overflows so if they did have the answer I couldnt make sense of it. I am trying to filter the JSON data that is in the ng-repeat but it just brings up nothing whenever I type something into the input. Just a bit of help even if its just pointing me in the direction would be greatly appreciated. I have a jsbin that shows what I am talking about.

http://jsbin.com/ILEQEso/1/edit

Upvotes: 1

Views: 2135

Answers (2)

jpmorin
jpmorin

Reputation: 6018

You can modify your filter criteria like this:

ng-repeat="story in storytitle | filter:{'title.$text':searchquery}"

It will look for the search term on the title.$text property only.

Don't forget to set your searchquery to empty at the beginning in the controller:

$scope.searchquery = '';

Here is your updated Jsbin: http://jsbin.com/AQoJEMU/1/edit

Upvotes: 1

J. Bruni
J. Bruni

Reputation: 20490

The problem is that the filter can't reach nested properties.

It can't filter stories.title.$text.

Possible solutions:

  • Write your own filtering function.
  • Somehow make the contents to be filtered available in a property which is not nested. For example: instead of stories.title.$text, make it available at stories.title_text.

Here is a working JS Bin: http://jsbin.com/esAteYI/2/edit

I have done two things:

  1. Created a stories.$text property, including the contents of both stories.title.$text and stories.teaser.$text on it.

  2. You can specify to which property tthe filtering should be applied. Look how I've changed the ng-model attribute of the search input field to <input ng-model="searchquery.$text" />
    By specifying the .$text property, the filter will work only on it. So, it will not waste precious time trying to apply the search through the other properties.

Upvotes: 0

Related Questions