Angular forEach Explained with 2 examples

The forEach function in AngularJS

The Angular forEach function can be used to perform some action for each item in a given object or array. The iterator function in forEach is invoked for each item of the array or object.

This is almost similar to the foreach loop in other programming languages like JavaScript,  PHP, etc. where foreach loop is used with arrays or other collections. In AngularJS, it is a little different, however, it iterates through each element of the given array or object.

Syntax of using forEach function

Following is the way to use the forEach function of AngularJS:

angular.forEach(object_or_Array, iterator, [context]);

Where the first parameter can be an object or an array. The second parameter is an iterator function that is invoked for each item in object or array.

See the examples in the following section for learning more about forEach Angular function.

A demo of using forEach with an array

In this example, an array is created with three elements in the controller part of Angular. The forEach is used with that array and employee names are assigned to a variable. The employee names are displayed in a div element as the web page loads:

angular forEach

See online demo and code

The code:

<body ng-app="foreachdemo">

    <div class="foreach_demo" ng-controller="demoController">

       <h3>A demo of forEach in AnjgularJS</h3>

       <p><strong>Names in array:</strong></p>

        <div ng-repeat="emp_name in employee_names ">

            {{emp_name}}

        </div>

    </div>

</body>

</html>

<script>

    var app = angular.module("foreachdemo", []);

    app.controller('demoController', ['$scope', function ($scope) {

        $scope.employee_names = [];

        var values = [{emp_name: 'Tina', salary: 5000},{emp_name: 'Mike', salary: 5000},{emp_name: 'Saleem', salary: 5000}]; 

        angular.forEach(values, function (value, key) {

            $scope.employee_names .push(value.emp_name);

        }); 

    }]);

</script>

</body>

An example of forEach for displaying index and values

In this example, the index and values of the array are displayed by using the forEach function of AngularJS. As you click the button, the keys and values of the array will display in the div element, unlike the above example where only the values are displayed.

angular forEach index value

The code:

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

<style>
.foreach_demo {
  background: #366D6D;
  height: auto;
  width:240px;
  border-radius: 8px;
  padding:13px;
  font-size:14px;
  color:#fff;   
}
</style>
</head>
<body>  
<div ng-app="forEachApp">  
<div ng-controller="myController">  
    <p><button class="btn btn-info" ng-click ="demoforEach()">Click for displaying index/values</button></p> 
    
    <div class="foreach_demo"> {{content}<!--remove this comment-->} </div>
	
</div> 
</div>

 <script>
var forEachApp = angular.module("forEachApp", []);
 forEachApp.controller("myController", function($scope) {
 $scope.content= '';
 var emp_arr = [];
 emp_arr['10'] = 'Tina';
 emp_arr['20'] = 'Mike';
 emp_arr['30'] = 'Saleem';
  $scope.demoforEach = function() {
  angular.forEach(emp_arr, function(value, key) {
  $scope.content += "Array Index : "+key+", Array Value: "+value + " " ;
  });
  }
});
</script>
</body>  
</html>

You can see in the controller section, an array with three elements is created. This is followed by using a forEach function where that array element is used along with its value and key. The values of index and values of elements are used in the next line for gathering the information of each element in the content variable.

In the markup section, a div is used where “content” is given that contains the string with key/value pairs of the array. On the click event of the button, the ng-click directive is used.