Home / Angular / Using AngularJS forEach() Function in AngularJS with Example

Using AngularJS forEach() Function in AngularJS with Example

We are going to discuss  Angular.forEach function. Angular has a very rich API with many functions and directives. forEach is a function reside in `ng` Module. forEach invokes the iterator function for each item in an array or object. It is similar to `for in’`in javascript. ‘for in’ is used for objects while foreach can be used for both arrays and objects. Also, using forEach will be more convenient if you are using Angular for your application logic as it will maintain the consistency of the code.

Using Angular forEach() with an Array

In this tutorial, we will be creating a small application which will use `Angular.forEach` function.

What we do in this application, we will have an Array of objects Like this

[
{ name: 'Adam', marks : '75', grade : 'P' },
{ name: 'Mike', marks : '45', grade : 'F' },
{ name: 'Dino', marks : '85', grade : 'P' },
{ name: 'Anna', marks : '35', grade : 'F' },
{ name: 'Lucy', marks : '80', grade : 'P' }
]

We want to print the students who have passed the exam and who have failed the exam separately. It can easily be done with forEach as forEach Allows us to write functions for each element in the array easily. So, forEach iterates over every object in the list, then it will add the student names to two separate arrays depending on the status of the grade. Let’s start coding it.

You might check it :

**Add AngularJs in your application.**

First, you have to get AngularJs library to your application before using it. This can be done in two ways.

1. You can use a CDN for this.

There are performance benefits in using a CDN. You can find a list of CDN links

https://cdnjs.com/libraries/angular.js/

2. Use Angular.js file application as an external file.

You can download AngularJs from the official site and include it in your application.

In this application, I will use the google CDN. Then you have to add it into the script tag which is inside the head tag of the web page.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > </script>

Next, we are going to implement the logic part. See the following code.

<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function ($scope) {
$scope.list = [
{ name: 'Adam', marks : '75', grade : 'P' },
{ name: 'Mike', marks : '45', grade : 'F' },
{ name: 'Dino', marks : '85', grade : 'P' },
{ name: 'Anna', marks : '35', grade : 'F' },
{ name: 'Lucy', marks : '80', grade : 'P'}];

$scope.submit = function (list) {
var passStudents = [];
var failStudents = [];
angular.forEach(list, function (value, key) {
if(value.grade =="P")
passStudents.push(value.name);
else
failStudents.push(value.name);
});
if (passStudents.length > 0)
$scope.pass_list = passStudents.toString();
if (failStudents.length > 0)
$scope.fail_list = failStudents.toString();
}
}]);
</script>

This is the script code of the application. Place this Script code at bottom of the body.

So, what does it do here?

First, we create an Angular module with `myApp` which we will use later in the View.

Then we will access a controller called `myController` of it.

Then we write a submit function which will be called inside the view area. Inside the function, we create two arrays called `passStudents` and `failedStudents`.

This is to hold names of Students who have passed the exam and who have failed the exam.

Then we use foreach function to iterate over the list. forEach takes each array element separately, then check whether the grade is equal to `P` if yes, then pass the names of that student to the passStudent array.

Else push the name to the failedStudent array. Then we convert the arrays into Strings and assign it to scope variables called `pass_list` and `failed_list` which will be used by the view.

Code for the view is as follows.

<div ng-app="myApp" ng-controller="myController">
<p>Pass Students{{submit(list)}}</p>
<p style="padding-left: 20px">{{pass_list}}</p>
<p>Failed Students</p>
<p style="padding-left: 20px">{{fail_list}}</p>
</div>

 

If you have used Angular before you may know that ng-app attribute must be specified and your Angular code must be placed inside the tags for which you defined the ng-app attribute.

Submit(list) function will be called at the page loading. then angular expressions such as {{pass_list}} and {{failed_list}} will be executed.

Notice that you have not used ‘key’ attribute here. When foreach iterate over an array, ‘key represents the position of the item in the array.

```passStudents.push(value.name);```
if you replace this line with 
```passStudents.push(key);```
you get the array index of each Student.

Using Angular forEach() with an Object

We earlier said that we can use forEach with both arrays and objects, in our next example we will have a Student list as an Object.

This will help you to grasp the concept of key better. Let’s do it now.

This is the object we are going to use for the Students.

{
Adam : {marks : '75', grade : 'P'},
Mike : {marks : '45', grade : 'F'},
Dino : {marks : '85', grade : 'P'},
Anna : {marks : '35', grade : 'F'},
Lucy : {marks : '80', grade : 'P'}
}

We will change our business logic according to the current object.

<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function ($scope) {
$scope.list = {
Adam : {marks : '75', grade : 'P'},
Mike : {marks : '45', grade : 'F'},
Dino : {marks : '85', grade : 'P'},
Anna : {marks : '35', grade : 'F'},
Lucy : {marks : '80', grade : 'P'}
};
$scope.submit = function (list) {
var passStudents = [];
var failStudents = [];
angular.forEach(list, function (value, key) {
if (value.grade == "P")
passStudents.push(key);
else
failStudents.push(key);
});
if (passStudents.length > 0)
$scope.pass_list = passStudents.toString();
if (failStudents.length > 0)
$scope.fail_list = failStudents.toString();
}
}]);
</script>

Notice the differences. list object has 5 objects inside it. When forEach iterates over the list object, it will take each of these sub-objects. So, the key will be Student names such as Adam, Mike. value will be the objects that represent those student names. You can see that if the value.grade equals to ‘P’ then it pushes the key to pass_list.

Next, two list will be displayed in the webpage with following code.

 

<div ng-app="myApp" ng-controller="myController">
<p>Pass Students{{submit(list)}}</p>
<p style="padding-left: 20px">{{pass_list}}</p>
<p>Failed Students</p>
<p style="padding-left: 20px">{{fail_list}}</p>
</div>

Conclusion

We have discussed the main two uses of forEach function in Angular API. There is one more important point to be mentioned. forEach does not throw a TypeError for objects with ‘undefined’ and ‘null’ values. Instead, it will return the provided value.
So, the tutorial about `forEach` ends here.

Get New Freebies To Your Inbox

Get New Freebies To Your Inbox

Join our mailing list to receive the latest FREEBIES and updates from our team.

You have Successfully Subscribed!

Leave a Reply

Your email address will not be published. Required fields are marked *