angularjs - filtering a json api with ng-repeat

Question

I have an api that I am calling like so:

app.controller('AppCtrl', function($scope, $http) {
$http({
  method: 'GET',
  url: 'http://localhost:4000/people',
  headers: {
    'Accept' : "application/json; charset=utf-8"  
},
}).then(function successCallback(data) {
     $scope.camps = data.data;
  }, function errorCallback(data) {
        console.log(data);
   });
});

and I am doing an ng-repeat with a directive inside to loop through the data and output the variables:

<div ng-repeat="camp in camps track by $index | filter:search:strict">
     <tile></tile>
</div>

I would like to be able to filter the <tile>, so I have an input that looks like this:

<md-input-container class="md-block">
    <label>Person name</label>
    <input ng-model="search.name">
</md-input-container>

Inside the tile directive I have a portion that looks like this:

<div class="variation-text col-md-8">
    <h3 class="problem-header grey-header">{{ camp.name }}</h3>
 </div>

and this is outputting the name endpoint from the api. How can I filter this name endpoint using the input field shown above?

When I currently run this application I get an error from Angular stating: Error: filter:notarray Not an array (url)..

What am I doing wrong for this to not work? I'd love some help. Thank you.

@DataHerder It returns a json object. Image: i.gyazo.com/68a284843d059f87eb830aae5583cc6b.png — Katie
– Katie, Commented Feb 24, 2016 at 17:18
Error is clearly telling you that the data is not an array. . Show sample of data — charlietfl
– charlietfl, Commented Feb 24, 2016 at 17:24
Copy sample of actual json either from response body of request or just open the url itself. Seems right in picture — charlietfl
– charlietfl, Commented Feb 24, 2016 at 17:33

charlietfl · Accepted Answer · 2016-02-24 17:44:05Z

1

Problem is order of operations in ng-repeat query

From ngRepeat Docs:

Note: track by must always be the last expression:

What is happening is the filter is being applied to $index which isn't an array and thus you get the notarray error

Change to

<div ng-repeat="camp in camps | filter:search:strict  track by $index">

answered Feb 24, 2016 at 17:44

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

3 Comments

Katie Over a year ago

Thank you, this removed the error, however, I'm still unable to sort using the input from above...

charlietfl Over a year ago

what is strict ..is it a variable in scope? If not needs to be boolean

Katie Over a year ago

I was using strict because the angular docs were using strict to filter. filter docs

Collectives™ on Stack Overflow

angularjs - filtering a json api with ng-repeat

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related