AngularJS forEach() Function Example – Iterate or Loop Through Each Item in An Array or Object in AngularJS

You can loop through an Array or an Object in AngularJS using the forEach() function. The function invokes the iterator function that iterates or loops through each item in an array. I am sharing two examples here, showing how to use the forEach() loop in AngularJS to extract items or values from array or an object.

forEach() Syntax

angular.forEach(object, iterator, [context])

object: The object interate over.
iterator: The iterator function or the code.
context: Object to become context (using this) for the iterator function.

See the Demo

Using Angular forEach() with an Object

In the first example, I am creating an object named employees, which has an array of data in it, such as the date of joining, name and age of each employee. I’ll use the forEach() function to loop through each value in the object and extract the values and display it (in the console) one by one.

The Script
<script>
    var myApp = angular.module('myApp', []);

    myApp.controller('myController', ['$scope', '$filter', function ($scope, $filter) {

        // 'employees' OBJECT, WITH AN ARRAY OF DATA.
        $scope.employees = {
            '05/17/2015': { 'name': 'Alpha', 'age': 37 },
            '06/25/2016': { 'name': 'Bravo', 'age': 27 },
            '09/11/2016': { 'name': 'Charlie', 'age': 29 },
            '01/17/2017': { 'name': 'Delta', 'age': 19 },
            '03/09/2014': { 'name': 'Echo', 'age': 32 }
        }

        // ITERATE THROUGH ITEMS IN OBJECT.
        angular.forEach($scope.employees, function (value, key) {
            var d = new Date('01/05/2016');         // DATE TO COMPARE (A SPECIFIED DATE).
            d = $filter('date')(d, 'shortDate');

            var d1 = new Date();
            d1 = $filter('date')(key, 'shortDate');

            //CHECK IF THE DATE IN OBJECT IS GREATER THAN OR EQUAL TO THE SPECIFIED DATE.
            if (Date.parse(d1) >= Date.parse(d)) {
                // SHOW THE EXTRACTED DATA.
                console.log(key + ": " + value.name + ": " + value.age);
            }
        });
    } ]
    );
</script>

See the Demo

The forEach() function will loop through each value in the object. Here the key has the date and value has name and age. Inside the loop, I am checking a condition that compares the date in the object with the specified date.

I am also using the “date” $filter format to compare the specified date with the dates in the object.

Note: This example is also useful for comparing two dates in AngularJS.

Using Angular forEach() on a JSON Array

This is the 2nd example. You can apply forEach() function on a JSON Array too. In this example, I have a list of computer accessories in JSON array format. Using forEach(), the function will loop through each item and bind it to the View, using an Expression ({{ }}).

The Markup
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" 
        ng-controller="myController">

        <p><button ng-click="submit(list)">Show Items</button></p>
        <p>{{the_list}}</p>
    </div>
</body>
The Script
<script>
    var myApp = angular.module('myApp', []);
    myApp.controller('myController', ['$scope', function ($form) {

        $form.list = [
            { name: 'Keyboard' },
            { name: 'Speakers' },
            { name: 'Mice' },
            { name: 'Routers and USBs' },
            { name: 'Monitors'}];

        $form.submit = function (list) {

            var myAccess = [];

            angular.forEach(list, function (value, key) {
                myAccess.push(value.name);
            });

            if (myAccess.length > 0)
                $form.the_list = myAccess.toString();
        }
    } ]
    );
</script>
</html>

In the above example, I am using only one parameter of the forEach() function that is value. I am pushing the values one by one into an array named myAccess (or myAccessories). Finally, I’ll bind the list of accessories to my View using the Expression (the_list).

That’s it. Thanks for reading.

Previous - AutoComplete Textbox in AngularJS with Dynamic Data using Web API C#Next - Add or Remove Table Rows Dynamically in AngularJS



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!