AngularJS (54 Blogs) Become a Certified Professional

Angular.forEach: Implementation of the forEach function

Last updated on Jun 19,2023 8.8K Views

9 / 12 Blog from Introduction to Angular

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. Check out this web developer course today to learn more about Angular.

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 Course 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. Enroll in a Flutter Certification Course and become an expert in building cross-platform mobile apps with ease.

Learn the latest trends and techniques in UI/UX design through UX Design Course.

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

Upcoming Batches For Angular Certification Training Course
Course NameDateDetails
Angular Certification Training Course

Class Starts on 30th March,2024

30th March

SAT&SUN (Weekend Batch)
View Details
Comments
0 Comments

Join the discussion

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.

image not found!
image not found!

Angular.forEach: Implementation of the forEach function

edureka.co