In this tutorial we will show you the solution of angularjs loop through array of objects, we need to use loop function to iterate through each items in an array or object. so we can use forEach() loop, *ngFor, ng-repeat or for loop any one of them to iterate items in an array of object.
These functions invokes the iterate function that iterates each items in array and in our example we used ng-repeat.
Step By Step Guide On Angularjs Loop Through Array Of Objects :-
In our application we defined our app and controller then using ng-repeat loop through we iterates each items in our array of objects.
Ng-repeat directive repeats a set of HTML , a given number of times. The set of HTML will be repeated once per item in a collection.
The collection must be an array or an object.
In our application we defined an array ‘obj’ and within that we defined another set of arrays object ‘batman and Superman’ so we used ng-repeat loops as two times like two dimensional loop for collects key pair values then printed on webpage.
<!DOCTYPE HTML>
<html>
<head>
<title>Loop Through array</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var obj = {
"batman": [{
"applicantSkillID": "htl2",
"rating": 3,
"applicantInterviewerID": "usr1",
"applicantInterviewerName": "batman",
"applicantSkillName": "HTML"
},
{
"applicantSkillID": "cs43",
"rating": 5,
"applicantInterviewerID": "usr1",
"applicantInterviewerName": "batman",
"applicantSkillName": "css"
}
],
"Superman": [{
"applicantSkillID": "ht12",
"rating": 3,
"applicantInterviewerID": "usr2",
"applicantInterviewerName": "Superman",
"applicantSkillName": "HTML"
},
{
"applicantSkillID": "cs43",
"rating": 3,
"applicantInterviewerID": "usr2",
"applicantInterviewerName": "Superman",
"applicantSkillName": "css"
}
]
};
function MyCtrl($scope) {
$scope.items = obj;
}
</script>
</head>
<body>
<div ng-app ng-controller="MyCtrl">
<div ng-repeat="(key,value) in items">
<div ng-repeat="data in items[key]">
<span>Name : </span>{{data.applicantInterviewerName}} , <span>Rating : </span>{{data.rating}}
</div>
</div>
</div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and must added to webpage by using <script> tag.
- In controller we created json array of object ‘obj’ then within ‘obj’ array we defined two arrays ‘batman and Superman’. Within subset array we defined keys (applicantSkillID, rating, applicantInterviewerID, applicantInterviewerName, applicantSkillName) and respective different values.
- Finally we defined controller ‘MyCtrl’ function with $scope object as parameter within function we stores array object ‘obj’ to variable ‘items’.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here.
- In div tag we defined application and controller ‘MyCtrl’ using directives of ‘ng-app,ng-controller’.
- Then within first <div> using ng-repeat directive we collects array ‘obj’ of key ‘batman,Superman’ with respective array values.
- Within second <div> again using ng-repeat directive we collects arrays ‘batman,Superman’ of key ‘applicantSkillID, rating, applicantInterviewerID, applicantInterviewerName, applicantSkillName’ with respective values.
- Finally we prints ‘applicantInterviewerName, rating’ key values in arrays ‘batman,Superman’ on webpage using <span> tag.
- Both </body> ,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to loop through array of objects using angularjs.
When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.
When we executing our program on browser it will displays json array keys ‘applicantInterviewerName, rating’ values on webpage.
We can create our own json array with different information also like employee detail, author details or company details,..etc.
I hope this tutorial on angularjs loop through array of objects helps you and the steps and method mentioned above are easy to follow and implement.
