Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
AngularJS – forEach() function
The forEach() function in AngularJS uses an iterator to iterate over collections of items, objects, or arrays. The iterator function is called with three parameters: value, key, and obj.
- value represents the object property or array element
- key specifies the object property key or array element index
- obj represents the whole object reference
Note that the forEach() function does not iterate over inherited properties.
Syntax
angular.forEach(obj, iterator, [context])
Parameters
- obj ? The object or array to iterate over
- iterator ? The function to be called for each item
- context (optional) ? Object to use as context (this) for the iterator function
Example ? Iterating Array of Objects
Here's how to use forEach() to extract employee names from an array of objects ?
<!DOCTYPE html>
<html>
<head>
<title>angular.forEach() Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
</head>
<body ng-app="app" style="padding:30px">
<h1 style="color:green">Welcome to Tutorials Point</h1>
<h2>AngularJS forEach() Example</h2>
<div ng-controller="demo">
<h3>Employee Names:</h3>
<ul>
<li ng-repeat="name in names">{{name}}</li>
</ul>
</div>
<script>
var app = angular.module("app", []);
app.controller('demo', ['$scope', function ($scope) {
$scope.names = [];
var employees = [
{name: 'John', department: 'IT'},
{name: 'Steve', department: 'HR'},
{name: 'Bill', department: 'Finance'},
{name: 'Clark', department: 'Marketing'},
{name: 'Tim', department: 'Operations'}
];
angular.forEach(employees, function (employee, index) {
console.log('Processing employee at index ' + index + ': ' + employee.name);
$scope.names.push(employee.name);
});
}]);
</script>
</body>
</html>
Example ? Iterating Simple Array
You can also use forEach() with simple arrays ?
var app = angular.module("app", []);
app.controller('demo', ['$scope', function ($scope) {
var colors = ['Red', 'Green', 'Blue', 'Yellow'];
$scope.colorList = [];
angular.forEach(colors, function (color, index) {
$scope.colorList.push('Color ' + (index + 1) + ': ' + color);
});
}]);
Output
When you run the first example, you will see the following output in your browser ?
Key Points
- forEach() is specifically for iteration, not transformation
- It does not create a new array (unlike
map()) - The iterator function receives three parameters: value, key/index, and original object
- It skips inherited properties when iterating over objects
- The optional context parameter sets the
thisvalue inside the iterator function
Conclusion
AngularJS forEach() provides a convenient way to iterate over arrays and objects. It's particularly useful for processing data and performing operations on each element without creating new arrays.
Updated on: 2026-03-26T14:52:23+05:30
5K+ Views
Advertisements