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 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.
- Program:
<!DOCTYPE html>
<
html
ng-app
=
"myApp"
>
<
head
>
<
script
src
=
</
script
>
</
head
>
<
body
ng-controller
=
"MyController"
>
<
center
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
div
ng-repeat
=
"(key, value) in gfg"
>
<!-- First Iteration-->
<
p
>{{key}} - {{value}}</
p
>
</
div
>
</
center
>
</
body
>
<
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
>
</
html
>
chevron_rightfilter_none - 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 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.
- Program:
<!DOCTYPE html>
<
html
ng-app
=
"myApp"
>
<
head
>
<
script
src
=
</
script
>
</
head
>
<
body
ng-controller
=
"MyController"
>
<
center
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
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
>
</
body
>
<
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
>
</
html
>
chevron_rightfilter_none - Output:
Recommended Posts:
- How to get all property values of a JavaScript Object (without knowing the keys) ?
- How to filter ng-repeat values according to ng-model using AngularJS ?
- Iterate over a set in Python
- Iterate over a list in Python
- Iterate over a dictionary in Python
- How to iterate over a JavaScript object ?
- Iterate over characters of a string in Python
- How to iterate over rows in Pandas Dataframe
- Different ways to iterate over rows in Pandas Dataframe
- Iterate associative array using foreach loop in PHP
- Mapping external values to dataframe values in Pandas
- D3.js | d3.keys() Function
- D3.js | d3.map.keys() Function
- ReactJS | Keys
- How to convert Map keys to an array in JavaScript ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.