Iterate or Loop through each Array item or Object using AngularJS forEach()

angularjs javascript json

← PrevNext →

Tools you can use

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 this 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 this 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 View and the Controller
<!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>

<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>
Try it

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. ☺

← PreviousNext →