Использование ng-repeat для вложенного массива объектов - PullRequest
Новая
       8

Использование ng-repeat для вложенного массива объектов

0 голосов
/ 15 октября 2018

Ниже приведен мой объект JSON, и я пытаюсь показать то же самое в HTML-таблице. 

$scope.results = {
  "data": [
    {
      "name": "Sam",
      "details": [
        {
          "official": [
            {
              "address1": "Link road",
              "pincode": 76755554
            },
            {
              "address1": "K main road",
              "pincode": 9766565
            }
          ]
        },
        {
          "name": "John",
          "details": [
            {
              "official": [
                {
                  "address1": "Old college road",
                  "pincode": 11111
                },
                {
                  "address1": "near east side",
                  "pincode": 6555446
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Я использовал ng-repeat для получения приведенного ниже вывода.Но я не получаю ожидаемый результат Final output table

Это код, который я попробовал и застрял JSFIDDLE

Любая идея оКак достичь ожидаемого результата будет очень полезно.

1 Ответ

0 голосов
/ 16 октября 2018

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

$scope.peopleFlat = [];

function flattenPeople(people) {
    people.forEach((person) => {
        $scope.peopleFlat.push({
           name: person.name,
           addresses: person.details[0].official
        });

        if (person.details.length > 1) {
            flattenPeople([person.details[1]]);
        }
    });
}

flattenPeople($scope.people);

Тогда вы можете использовать комбинацию ng-repeat-start и ng-repeat-end, чтобы заставить его работать, используя rowspan вместо вложенного <table> элемента. 

<table class="table table-bordered table-condensed">
    <tr>
        <th>Name</th>
        <th>Address</th>
        <th>Pincode</th>
    </tr>
    <tr ng-repeat-start="person in peopleFlat">
        <td rowspan="{{person.addresses.length || 1}}">{{person.name}}</td>
        <td>{{person.addresses.length ? person.addresses[0].address1 : ''}}</td>
        <td>{{person.addresses.length ? person.addresses[0].pincode : ''}}</td>
    </tr>
    <tr ng-repeat-end ng-repeat="address in person.addresses.slice(1)">
        <td>{{address.address1}}</td>
        <td>{{address.pincode}}</td>
    </tr>
</table>
...