Как связать несколько файлов JSON в ng-repeat (AngularJS)?

Question

У меня есть несколько файлов JSON:

main.json:

{
  "MainRegister": [
    {
      "name": "Name1",
      "url": "url1.json",
    },
    {
      "name": "Name2",
      "url": "url2.json",
    },
 ]
}

url1.json

{
  "SubInformation": {
    "description": "Hello World 1",
    "identifier": "id1",
  }
}

url2.json

{
  "SubInformation": {
    "description": "Hello World 2",
    "identifier": "id2",
  }
}

Теперь я хочу создать div ng-repeat в моем index.html так, чтобы он загружал все поля из файлов, более того, я хочу отобразить следующий вывод:

• Имя 1: Hello World 1 (id1)
• Имя 2: Hello World 2 (id2)

Как я могу связать эти файлы способом ng-repeat? Или есть другой способ?

Answer 1

Вам нужно сначала загрузить их, а затем установить переменную области, которая содержит необходимые данные в массиве. Вы можете сделать $http получить в вашем контроллере (как в примере ниже), но если это что-то многоразовое или больше, чем простое приложение, я бы порекомендовал сделать это во встроенном сервисе.

.controller('MyCtrl', function($scope,$http){
   $scope.entries = [];
   $http.get('main.json').success(function(data) {
      angular.forEach(data.MainRegister,function(entry) {
         $http.get(entry.url).
          success(function(data) {
            $scope.entries.push(angular.extend(entry,data.SubInformation);
         });
      });
   });
});

и тогда ваш шаблон может выглядеть примерно так

<div ng-repeat="entry in entries">
  <span>{{entry.name}}: {{entry.description}} ({{entry.id}})</span>
</div>

Вы можете использовать фильтры, если вы хотите заказать их, или загрузить $scope.entries в определенном порядке, или если вы не хотите показывать какие-либо записи, пока все не будут готовы, тогда вы можете установить готовую переменную или только установить $scope.entries в конце и т. д.

Позвольте мне добавить, что мне не нравятся такие глубокие и глубокие встроенные ajax-вызовы, а также их последовательность, но это вопрос стиля. Я стал большим поклонником асинхронной библиотеки caolan для того, чтобы сделать приведенный выше код контроллера намного чище. http://github.com/caolan/async

Answer 2

Простой путь:

Аналог оператора UNION SQL ANSI.

Для получения дополнительной информации см. Пример https://docs.angularjs.org/api/ng/directive/ngInit

<script>
  angular.module('initExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.list = [['a', 'b'], ['c', 'd']];
    }]);
</script>
<div ng-controller="ExampleController">
  <div ng-repeat="innerList in list" ng-init="outerIndex = $index">
    <div ng-repeat="value in innerList" ng-init="innerIndex = $index">
       <span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>
    </div>
  </div>
</div>

Результат:

list[ 0 ][ 0 ] = a;
list[ 0 ][ 1 ] = b;
list[ 1 ][ 0 ] = c;
list[ 1 ][ 1 ] = d;