Как применить ng-repeat для такой структуры

Question

Я хотел бы получить набор элементов, а затем отобразить в свойствах пользовательского интерфейса, перечисленных в них. Проблема заключается в том, что JSON я получаю от одной из услуг вызывает проблемы:

Вместо структуры, которую я обычно ожидают, т.е.

"items": [ 
    { 
     "field1": "value1", 
     "field2": "value2", 
     "id":"ABCDEF1234" 
    }, 
    { 
     "field1": "value1", 
     "field2": "value2", 
     "id":"XYZ12345" 
    } 
] 

Я получаю:

"items": [ 
    { 
     "ABCDEF1234": { 
     "field1": "value1", 
     "field2": "value2", 
     "id":"ABCDEF1234" 

     } 
    }, 
    { 
     "XYZ12345": { 
     "field1": "value1", 
     "field2": "value2", 
     "id":"XYZ12345" 
     } 
    } 
] 

Обычно я бы назначить «пунктов» до $ scope.items, а затем будет использовать нг-повторить, как это:

<div ng-repeat="item in items"> 
     <ul> 
     <li>{{item.id}}</li> 
     <li>Field1 - {{item.field1}}</li> 
     <li></li>Field2 - {{item.field2}}</li> 
     </ul> 
    </div> 

Но в этом случае каждый элемент представлен динамическим идентификатором, который помимо отображения в качестве одного из полей также используется в качестве ключа объекта. Как следует перебирать такой коллекции с помощью нг-повтора, чтобы отобразить что-то вроде этого:

ABCDEF123 FIELD1 - value1
FIELD2 - value2

XYZ12345
FIELD1 - value1
FIELD2 - value2

Заранее благодарю вас за помощь.

Answer 1

<div ng-repeat="item in items"> 
    <div ng-repeat="(itemKey, itemValue) in item"> 
     <h2>{{ itemKey }}</h2> 
     <ul ng-repeat="(key, value) in itemValue" ng-if="key !== 'id'"> 
      <li>{{ key }} - {{ value }}</li> 
     </ul> 
    </div> 
</div> 

Answer 2

Вы можете просто перевести его в более удобный для использования формат, когда вы его получите. например

items = items.map(item => item.values[0]); 

Это карта его в

[ 
    { 
    "field1": "value1", 
    "field2": "value2", 
    "id": "ABCDEF1234" 
    }, 
    { 
    "field1": "value1", 
    "field2": "value2", 
    "id": "XYZ12345" 
    } 
] 

Answer 3

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 

 
    $scope.items = [{ 
 
    "ABCDEF1234": { 
 
     "field1": "value1", 
 
     "field2": "value2", 
 
     "id": "ABCDEF1234" 
 

 
    } 
 
    }, { 
 
    "XYZ12345": { 
 
     "field1": "value1", 
 
     "field2": "value2", 
 
     "id": "XYZ12345" 
 
    } 
 
    }] 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 
    <div ng-repeat="item in items"> 
 
    <div ng-repeat="(key, value) in item"> 
 
     {{key}} 
 
     <div ng-repeat="(key, value) in value" ng-if="key!== 'id'"> 
 
     {{key}}-{{value}} 
 
     </div> 
 
     <br/> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

нг-повтор вызывает проблемы с производительностью, если у вас есть большой list.It создаст ряд дочерних областей и наблюдателей. Лучше ограничить использование ng-repeat. Я предлагаю вам изменить данных в требуемом формате, а затем использовать одиночный ng-repeat.