Open In App

How to iterate over the keys and values with ng-repeat in AngularJS ?

Last Updated : 05 Sep, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!DOCTYPE html>
<html ng-app="myApp">
  
<head>
    <script src=
    </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.

HTML




<!DOCTYPE html>
<html ng-app="myApp">
  
<head>
    <script src=
    </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:

 



Similar Reads

How to iterate over filtered (ng-repeat filter) collection of objects in AngularJS ?
The task is to iterate over a collection of objects already filtered by ng-repeat filters and after clicking a button, change some property of only those objects which got filtered. Suppose you have a collection of objects that were filtered by a text search within a title property on each object. Now you want to iterate over this subset of the lis
3 min read
How to access index of the parent ng-repeat from child ng-repeat in AngularJS ?
In this article, we will see How to access the index of the parent ng-repeat from child ng-repeat in AngularJS. In AngularJS applications, when we implement the nested ng-repeat directives and if we need to access the index of the parent ng-repeat from the child ng-repeat, then we can do this by using 2 different approaches like by using the $paren
6 min read
How to filter ng-repeat values according to ng-model using AngularJS ?
In this article, we will see how to filter the value of the ng-repeat directive according to the ng-model directive using AngularJS. The ng-repeat values can be filtered according to the ng-model in AngularJS by using the value of the input field as an expression in a filter. We can set the ng-model directive on an input field to filter ng-repeat v
2 min read
How to pass the 2 $index values within nested ng-repeat in AngularJS ?
In AngularJS applications, we can create dynamic behavior by passing the $index values within the nested ng-repeat directives. In the application, the $index variable or value is nothing but the index of the current item or the product that is in the ng-repeat loop. We can pass these values using 2 different methods. So in this article, we will see
5 min read
How to Iterate over Enum Values in TypeScript?
Enums in TypeScript are a way to define a set of named constants. Sometimes we may need to iterate over all the values of an enum. There are several approaches to iterate over the enum values in TypeScript which are as follows: Table of Content Using a for...in loopUsing Object.values()Using a for…of loopExamples of Iterating over Enum Values in Ty
2 min read
How to use the $index inside a ng-repeat to enable a class and show a DIV in AngularJS ?
In AngularJS applications, we can use the $index variable within an ng-repeat directive to enable a class and show a DIV element based on the index of the current item in the iteration. The $index variable represents the current index of the item being processed in the ng-repeat loop. Similarly, to show or hide a DIV element, you can use the ng-sho
6 min read
How to display length of filtered ng-repeat data in AngularJS ?
The task is to Display the length of filtered ng-repeat data. Here we are going to use alias expression to solve this problem. Approach: To display the length of filtered ng-repeat data we use an alias expression. We create an alias for the variable used to filter the ng-repeat data and display the length of the alias at each moment. Syntax: &lt;el
2 min read
How to fetch the details using ng-repeat in AngularJS ?
In this article, we will see how to fetch the details with the help of the ng-repeat directive in Angular, along with understanding its implementation through the illustrations. AngularJS contains various types of pre-defined Directives, where most of the directives start with ng which denotes Angular. The ng-repeat directive is used to iterate ove
2 min read
How to iterate over three paragraphs and sets their color property red in jQuery ?
In this article, we will learn how to iterate over three paragraphs and sets their color property red in jQuery. We have three paragraphs, and we want to iterate on these paragraphs and set their color property to red. Approach: To do that, first, we add a button and on click this button, a function is called which name is fun() and in this functio
1 min read
What are the efficient ways to iterate over all DOM elements ?
The task is to iterate over all the DOM elements in an efficient way. Here are a few of the techniques discussed with the help of JavaScript. Approach 1: Use document.getElementsByTagName('*') method to select all DOM elements of the document.Run a loop and access them one by one by indexing (Eg. el[i] for ith element). Example: This example implem
2 min read