CODEWITHSUNDEEP
javascriptangularjs
oderfla
oderfla

Reputation: 1797

Filtering array in angular.js

I have an array of objects:

var arr = [{id:1, name: 'frank', type: 'great'}, {id:2, name: 'john', type: 'good'}, {id:3, name: 'mark', type: 'great'}, {id:4, name: 'mary', type: 'bad'}];

At some points, I need to print 3 different html-elements. In each one of this elements there will be a list of names that have the same "type".

I could make 3 different iterations where I go through all the items. But I wonder if there is a better way. The best I came with is to "filter" this array for each iteration. Even if I still will loop 3 times, maybe its a better way to do this, as you only go through the elements in the array that you really are interested of.

Im not really sure how to filter this. Im using angular.js. If not, I could use plain javascript. Or is there a better solution to this?

*****EDIT*****

Thanks to duffy for the advice on filter-function. I maybe require too much, but the thing is this:

There is an .html that now contains a div like this:

<div ng-repeat="person in peopleContainer.get_people()">

peopleContainer is a factory in the services.js-file. This factory function contains both the array with all the people and the functions to add one person/return the array with all the people.

Now (forget about filtering) the ng-repeat directive above doesn't seem to work. When I add a new person I can see that this person has been added to the array. But nothing happens in the div-container. No ng-repeat happens. Could this be because the array with people is located in the service.js-file? If yes: is there a way to work around this?

Upvotes: 1

Views: 77

Answers (2)

Rogerio Soares
Rogerio Soares

Reputation: 1613

As @duffy356 said, you can use filters.

Edit Resolve your promise in the controller :) (snippet updated to resolve a promise) 

var app = angular.module('my-app', []);

app.controller('MainCtrl', function($scope, $q, $timeout) {
  $scope.arr = [];
  
  $scope.get_people = function(){
    var results = [{id:1, name: 'frank', type: 'great'}, {id:2, name: 'john', type: 'good'}, {id:3, name: 'mark', type: 'great'}, {id:4, name: 'mary', type: 'bad'}];
    var deferred = $q.defer();
    $timeout(function () { deferred.resolve(results); }, Math.random() * 1000, false);
    return deferred.promise;
  }
  
  $scope.get_people().then(function(result) { $scope.arr = result;});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="my-app" ng-controller="MainCtrl">
  <div ng-repeat="a in arr track by $index">
    {{ a.name }} {{ a.type }}
    <div style="margin:10px" ng-repeat="aa in arr | filter : { type: a.type } track by $index">
      {{ aa.name }} <b>{{ aa.type }}</b>
    </div>
  </div>
</body>

Upvotes: 2

michelem
michelem

Reputation: 14590

Don't do peopleContainer.get_people() in the ng-repeat, do it in the controller and add the result to a scoped variable, then use it in the ng-repeat.

Controller:

$scope.people = peopleContainer.get_people();

HTML:

<div ng-repeat="person in people">

Upvotes: 1

Related Questions