How to select first object in object in AngularJS? - GeeksforGeeks

31 Oct, 2019
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<!DOCTYPE html><html>  <head>    <title>Angular first object in object</title>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">    </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>Output: This is the elements of the first object of the object institute(mentioned in the code above).
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 >
< 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
<!DOCTYPE html><html>  <head>    <title>Angular first object in object</title>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">    </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>
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.<!DOCTYPE html><html>  <head>    <title>Angular first object in object</title>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">    </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>Output: This shows one of the properties of the first object of the object institute(mentioned in the code above).
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.
<!DOCTYPE html><html>  <head>    <title>Angular first object in object</title>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">    </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>
Output: This shows one of the properties of the first object of the object institute(mentioned in the code above).
AngularJS-Misc
Picked
AngularJS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Angular PrimeNG Calendar Component
Angular 10 (blur) Event
Angular PrimeNG Messages Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?