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.

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
    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 }

        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');

            if (Date.parse(d1) >= Date.parse(d)) {
                // SHOW THE EXTRACTED DATA.
                console.log(key + ": " + + ": " + value.age);
    } ]


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>
    <script src=""></script>
    <div ng-app="myApp" 

        <p><button ng-click="submit(list)">Show Items</button></p>
The 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) {

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

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.

Related Posts:

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+
comments powered by Disqus

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