How to select first object in object in AngularJS?

The main problem that we are dealing with is that for an object of objects reading the object of a particular index position is not as simple as a list. We cannot loop over it using ngFor as an object is not considered an iterable. The importance of this issue may arise when the data received from any source is an object containing objects(like JSON files).
Altering the source file is very inconvenient so we need to be able to do something in the application itself. The most effective way is hidden in the problem itself. If objects are not iterable convert them to iterables.

Two Approaches are discussed below to solve this problem.

  • Approach 1:
    • Using the ng-repeat directive and the limitTo filter.
    • ng-repeat is able to iterate over the properties of objects which in our case are objects itself. The following syntax is used:
      < div ng-repeat="(key, value) in myObj" > ... < /div >
    • limitTo filter creates a new array or string containing only a specified number of elements. The elements are taken from either the beginning of the end of the source array, string or number, as specified by the value and sign (positive or negative) of limit.

    Syntax:



    html binding:
    {{ limitTo_expression | limitTo : limit : begin}}
    

    Examples: the value of the limit can be changed to get the element(object in this case) of the iterable

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Angular first object in object</title>
        <script src=
        </script>
    </head>
      
    <body ng-app='MyApp' 
          ng-controller='MyCtrl'>
        <div ng-repeat="(key, obj) in institute | limitTo : 1">
            <ul>
                <li ng-repeat="(prop, value) in obj">
                    {{prop}}: {{value}}
                </li>
            </ul>
        </div>
        <script>
            var app = angular.module('MyApp', []);
            app.controller('MyCtrl', function($scope) {
                $scope.institute = {
                    'school': {
                        location: 'Jamshedpur',
                        name: 'RV'
                    },
                    'college': {
                        location: 'Kolkata',
                        name: 'Jadavpur'
                    }
                };
                var instilist = new Array();
                for (key of Object.keys($scope.institute)) {
                    instilist.push($scope.institute[key]);
                }
                $scope.institute = instilist;
            });
        </script>
    </body>
      
    </html>

    chevron_right

    
    

    Output: This is the elements of the first object of the object institute(mentioned in the code above).

  • Approach 2:
    • Convert the object of objects into an array of objects and use the indexing method of square brackets([]) to display the first object of the array.

    Syntax:

    {{name_of_the array[index]}}

    Examples: The value of the index is 0 for the first object of the array. Since the elements of the array are objects we can refer to the properties of the objects using the (.) operator.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Angular first object in object</title>
        <script src=
        </script>
    </head>
      
    <body>
        <div ng-app="MyApp" ng-controller="MyCtrl">
            <p>The Name of the school is: {{institute[0].name}}</p>
        </div>
      
        <script>
            var app = angular.module('MyApp', []);
            app.controller('MyCtrl', function($scope) {
                $scope.institute = {
                    school: {
                        location: 'Jamshedpur',
                        name: 'RV'
                    },
                    college: {
                        location: 'Kolkata',
                        name: 'Jadavpur'
                    }
                };
                var instilist = new Array();
                for (key of Object.keys($scope.institute)) {
                    instilist.push($scope.institute[key]);
                }
                $scope.institute = instilist;
            });
        </script>
    </body>
      
    </html>

    chevron_right

    
    

    Output: This shows one of the properties of the first object of the object institute(mentioned in the code above).



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.