¿Cómo seleccionar el primer objeto en el objeto en AngularJS?

El problema principal con el que nos enfrentamos es que para un objeto de objetos, leer el objeto de una posición de índice particular no es tan simple como una lista. No podemos recorrerlo usando ngFor ya que un objeto no se considera iterable . La importancia de este problema puede surgir cuando los datos recibidos de cualquier fuente son un objeto que contiene objetos (como archivos JSON).
La alteración del archivo fuente es muy inconveniente, por lo que debemos poder hacer algo en la propia aplicación. La forma más efectiva está oculta en el problema mismo. Si los objetos no son iterables, conviértalos en iterables.

Dos enfoques se discuten a continuación para resolver este problema.

Enfoque 1:

Usando la directiva ng-repeat y el filtro limitTo .
ng-repeat puede iterar sobre las propiedades de los objetos que, en nuestro caso, son objetos en sí mismos. Se utiliza la siguiente sintaxis:
```
< div ng-repeat="(key, value) in myObj" > ... < /div >
```
limitTo filter crea una nueva array o string que contiene solo un número específico de elementos. Los elementos se toman desde el principio o el final de la array, string o número de origen, según lo especificado por el valor y el signo (positivo o negativo) de límite.

Sintaxis:

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

Ejemplos: el valor del límite se puede cambiar para obtener el elemento (objeto en este caso) del 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>

Salida: Estos son los elementos del primer objeto del instituto objeto (mencionado en el código anterior).

Enfoque 2:

Convierta el objeto de los objetos en una array de objetos y use el método de indexación de corchetes ([]) para mostrar el primer objeto de la array.

Sintaxis:

{{name_of_the array[index]}}

Ejemplos: El valor del índice es 0 para el primer objeto de la array. Dado que los elementos de la array son objetos, podemos referirnos a las propiedades de los objetos usando el operador (.).

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

Salida: Esto muestra una de las propiedades del primer objeto del instituto objeto (mencionado en el código anterior).

Publicación traducida automáticamente

Artículo escrito por anushil8991 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta