How to iterate over the keys and values with ng-repeat in AngularJS ?
The task is to iterate over a JS object (its keys and values) using the ng-repeat directive. This can be done using parenthesis in the ng-repeat directive to explicitly ask for a key-value pair parameter from angularJS. Here the variable key contains the key of the object and value contains the value of the object.
Syntax:
<element ng-repeat="(key, value) in JSObject">
Contents...
</element>Example 1: In this example, we will simply display all the keys and values of a JS object using ng-repeat. In first iteration, key = name and value = "GeeksforGeeks". In the 2nd iteration, key = location and value = "Noida India Sector 136"...This keeps on iterating until all the keys and their values are covered at least once similar to a for-each loop.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
</head>
<body ng-controller="MyController">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Iterating the keys & values with ng-repeat in AngularJS
</h3>
<div ng-repeat="(key, value) in gfg">\
<!-- First Iteration-->
<p>{{key}} - {{value}}</p>
</div>
</center>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', function($scope) {
$scope.gfg = {
Name: "GeeksforGeeks",
Location: "Noida India Sector 136",
Type: "Edu-Tech",
}
}]);
</script>
</body>
</html>
<html ng-app="myApp"><head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"> </script></head><body ng-controller="MyController"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Iterating the keys & values with ng-repeat in AngularJS </h3> <div ng-repeat="(key, value) in gfg">\ <!-- First Iteration--> <p>{{key}} - {{value}}</p> </div> </center> <script type="text/javascript"> var myApp = angular.module('myApp', []); myApp.controller('MyController', ['$scope', function($scope) { $scope.gfg = { Name: "GeeksforGeeks", Location: "Noida India Sector 136", Type: "Edu-Tech", } }]); </script></body></html>Output: On loading the page, we see that all the key-value pairs of the objects are already listed there. This is because the ng-repeat is called on load as the HTML gets loaded.
Example 2: In this example, we will loop over a nested object using the ng-repeat directive. In the first iteration, key = diamond and value = {hardness:"Ultra Hard", goodFor:"Display, cutting"} in the next iteration key = gold and value is its respective object. This keeps on iterating like a for-each loop over the key-value pairs of the object materials.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
</head>
<body ng-controller="MyController">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Iterating the keys & values with ng-repeat in AngularJS
</h3>
<div ng-repeat="(key, value) in materials">
<h1>{{key}}</h1>
<div ng-repeat="(key1, value1) in value">
<!-- since the "value" variable itself is
an object. We can iterate over its keys
and values again using ng-repeat. -->
<p>{{key1}} - {{value1}}</p>
</div>
</div>
</center>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', function($scope) {
$scope.materials = {
diamond: {
hardness: "Ultra Hard",
goodFor: "Display, cutting"
},
gold: {
hardness: "Hard",
goodFor: "Jewelry"
},
silver: {
hardness: "comparatively soft",
goodFor: "Jewelry, Display"
}
}
}]);
</script>
</body>
</html>
<html ng-app="myApp"><head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"> </script></head><body ng-controller="MyController"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Iterating the keys & values with ng-repeat in AngularJS </h3> <div ng-repeat="(key, value) in materials"> <h1>{{key}}</h1> <div ng-repeat="(key1, value1) in value"> <!-- since the "value" variable itself is an object. We can iterate over its keys and values again using ng-repeat. --> <p>{{key1}} - {{value1}}</p> </div> </div> </center> <script type="text/javascript"> var myApp = angular.module('myApp', []); myApp.controller('MyController', ['$scope', function($scope) { $scope.materials = { diamond: { hardness: "Ultra Hard", goodFor: "Display, cutting" }, gold: { hardness: "Hard", goodFor: "Jewelry" }, silver: { hardness: "comparatively soft", goodFor: "Jewelry, Display" } } }]); </script></body></html>Output:
