Filtering array in angular.js

Question

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?

take a look at docs.angularjs.org/api/ng/filter/filter

duffy356
– duffy356

2016-03-24 17:47:20 +00:00
Commented Mar 24, 2016 at 17:47 — duffy356
– duffy356, Commented Mar 24, 2016 at 17:47

Rogerio Soares · Accepted Answer · 2016-03-24 18:35:55Z

2

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>

edited Mar 24, 2016 at 18:35

answered Mar 24, 2016 at 18:03

Rogerio Soares

1,61316 silver badges14 bronze badges

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

3 Comments

oderfla Over a year ago

Thank you. I edited my question and added something about the ng-repeat directive. Filtering should not be a problem. But the ng-repeat wont work. Maybe I need to make the array available in the scope?

oderfla Over a year ago

Well, I answer myself. Yes, the array with person was in services. In my controller I added: $scope.people = servicename.get_people(). After that, in html, I have this div that refers to the array in the controller. And then everything works.

Rogerio Soares Over a year ago

You may use myPromise.then(function(result){...}, function(error){...}) to handle some possible errors too :)

michelem · Accepted Answer · 2016-03-24 18:10:34Z

1

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">

answered Mar 24, 2016 at 18:10

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Collectives™ on Stack Overflow

Filtering array in angular.js

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related