How to effectively filter arrays using Angular.js

Question

How to effectively filter arrays using Angular.js

One array of objects that I have on hand looks like this:

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'}];

Sometimes, I find myself needing to display 3 different html elements. Each element should contain a list of names with the same "type".

I could run 3 separate loops to search for these names, but I'm wondering if there's a more efficient method. The best approach I've thought of is to "filter" the array for each iteration. Even though I would still loop 3 times, it might be a more targeted way to go through only the elements that matter.

I'm unsure about how to go about filtering this data. I'm using angular.js currently, but I'm open to using plain JavaScript as well. Is there a better solution out there?

*****EDIT*****

Special thanks to duffy for suggesting the filter function. Here's my dilemma:

Within an .html file, there's a div structured like this:

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

The peopleContainer is defined as a factory in services.js. This factory holds the array of individuals and functions for adding new people or retrieving the entire list.

Currently, the ng-repeat directive above doesn't seem to be functioning properly. When a new person is added, it reflects in the array, but no changes are seen in the div container. The ng-repeat isn't triggering at all. Could this issue be due to the location of the people array within the service.js file? If so, is there a workaround for this situation?

javascript angularjs

Answer 1

Answer №1

According to @duffy356, the solution is to utilize filters.

Edit Make sure to fulfill your promise within the controller :) (updated snippet with promise resolution)

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>

Answer 2

According to @duffy356, the solution is to utilize filters.

Edit Make sure to fulfill your promise within the controller :) (updated snippet with promise resolution)

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>

Answer 3

Answer №2

Avoid calling peopleContainer.get_people() within the ng-repeat directive. Instead, retrieve the data in the controller and store it in a scoped variable. Then, use this variable in the ng-repeat.

Controller:

$scope.people = peopleContainer.get_people();

HTML:

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

Answer 4

Avoid calling peopleContainer.get_people() within the ng-repeat directive. Instead, retrieve the data in the controller and store it in a scoped variable. Then, use this variable in the ng-repeat.

Controller:

$scope.people = peopleContainer.get_people();

HTML:

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

How to effectively filter arrays using Angular.js

Answer №1

Answer №2

Similar questions

What is the best way to showcase a table below a form containing multiple inputs using JavaScript?

I am facing a challenge with AngularJS where I am unable to navigate between pages using the

Revise if a specific file is not being called by AJAX

Error: Unexpected character encountered

The functionality of displaying odd and even numbers is not functioning properly when using ng-hide to separate data between two tables

Show two choices in a select box next to each other

Tips for customizing the IconButton appearance in material-ui

Transferring data between two screens within an Ionic app by harnessing the power of angularJS

Issue involving retrieving keys from multiple classes in a JSON object

How to prevent writing to the z-buffer for a specific object in Three.js

Delivering variables beyond ng-view boundary

What is the best way to calculate the frequency of a specific word in an array?

jQuery custom slider with advanced previous and next navigation capability for jumping multiple steps

Confirm the email during registration with Node.js and Express.js

Is it possible to alter the location of a button through a click event

Exploring the orderBy feature in the react-firebase-hooks library with NextJS

Rounding off numbers with decimal points

What is the process for converting an array of integers into a byte stream and sending it to the client using Node.js?

Retrieve webpage using HTML stored in web storage

jQuery removes HTML tags from XML documents