AngularJS (39 Blogs) Become a Certified Professional

Angular.forEach: Implementation of the forEach function

Published on Sep 26,2019 662 Views
8 / 11 Blog from Introduction to Angular

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

The ForEach Loop in Angular can be used to perform some action for each item in a given array or object. This is similar to the foreach loop in other languages like JavaScript, PHP, etc. where the loop is used with arrays or other collections. In AngularJS, it is a little different, as it iterates through each element of the given array or object. In this blog on “forEach in Angular”, you will learn how to implement the forEach function with examples, in the following sequence.

forEach Loop in Angular

forEach in Angular invokes the iterator function once for each item in obj collection, which can be an object or array. The iterator function is invoked with iterator(value, key, obj), where the value is the object property or an array element, the key is the array element index or object property key, and obj is the obj itself.

Syntax of using forEach function

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

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

Here, the first parameter can be an object or an array and the second parameter is an iterator function invoked for each item in object or array.

Demo of using Angular forEach

<html> 
    <head> 
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%20%22%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.2%2Fangular.min.js%22%3E%20%0A%20%20%20%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> 
        <title>angular.forEach()</title> 
    </head> 
 
    <body ng-app="app" ng-cloak style="padding:30px">    
<h1 style="color:Blue">Learn with Edureka</h1>
<h2>Applying angular.forEach()</h2>

 Directives in Angular 
 
<div ng-controller="test">
 
<div ng-repeat="name in names">      
<ul>
<li>{{name}}</li>
</ul>
        </div>
        </div>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%20%0A%20%20%20%20%20%20%20%20var%20app%20%3D%20angular.module(%22app%22%2C%20%5B%5D)%3B%20%0A%20%20%20%20%20%20%20%20app.controller('test'%2C%20%5B'%24scope'%2C%20function%20(%24scope)%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%24scope.names%20%3D%20%5B%5D%3B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20values%20%3D%20%5B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bname%3A%20'Component%20Directives'%7D%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bname%3A%20'Structural%20Directives'%7D%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bname%3A%20'Attribute%20Directives'%7D%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%3B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20angular.forEach(values%2C%20function%20(value%2C%20key)%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24scope.names.push(value.name)%3B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%0A%20%20%20%20%20%20%20%20%7D%5D)%3B%20%0A%20%20%20%20%20%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> 
</body> 
</html> 

Output:
foreach in Angular - Edureka

This brings us to the end of this blog on “ForEach Loop in Angular”. I hope it was informative and added value to your knowledge.

If you wish to learn more about Angular framework, then check out our Angular Training & Certification which comes with instructor-led live training and real-life project experience. This training will help you understand Angular in-depth and help you achieve mastery over the subject.

Got a question for us? Please mention it in the comments section of  “ForEach Loop in Angular” and we will get back to you.

Comments
0 Comments

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.