Как выбрать первый объект в объекте в AngularJS?

Опубликовано: 18 Декабря, 2021

Основная проблема, с которой мы имеем дело, заключается в том, что для объекта из объектов чтение объекта определенной позиции индекса не так просто, как список. Мы не можем перебрать его с помощью ngFor, поскольку объект не считается итеративным . Важность этой проблемы может возникнуть, если данные, полученные из любого источника, представляют собой объект, содержащий объекты (например, файлы JSON).
Изменять исходный файл очень неудобно, поэтому нам нужно иметь возможность что-то делать в самом приложении. Самый действенный способ кроется в самой проблеме. Если объекты не являются итерируемыми, преобразуйте их в итерируемые объекты.

Ниже рассматриваются два подхода к решению этой проблемы.

Подход 1:

Использование директивы ng-repeat и фильтра limitTo.
ng-repeat может перебирать свойства объектов, которые в нашем случае сами являются объектами. Используется следующий синтаксис:
```
 <div ng-repeat = "(ключ, значение) в myObj"> ... </ div>
```
limitTo filter создает новый массив или строку, содержащую только указанное количество элементов. Элементы берутся либо из начала конца исходного массива, либо из строки, либо из числа, в зависимости от значения и знака (положительного или отрицательного) предела.

Синтаксис:

 привязка html:
{{limitTo_expression | limitTo: limit: begin}}

Примеры: значение лимита можно изменить, чтобы получить элемент (в данном случае объект) итерируемого

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

Вывод: это элементы первого объекта института объекта (упомянутого в коде выше).

Подход 2:

Преобразуйте объект объектов в массив объектов и используйте метод индексации квадратных скобок ([]) для отображения первого объекта массива.

Синтаксис:

 {{name_of_the массива [индекс]}}

Примеры: значение индекса равно 0 для первого объекта массива. Поскольку элементы массива являются объектами, мы можем ссылаться на свойства объектов с помощью оператора (.).

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

Вывод: показывает одно из свойств первого объекта института объекта (упомянутого в приведенном выше коде).

Вопросы о Web технологиях Picked AngularJS

Как выбрать первый объект в объекте в AngularJS?

РЕКОМЕНДУЕМЫЕ СТАТЬИ