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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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_right

    
    

  • Output:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.