Динамическое заполнение числа таблиц на основе полученных входных данных JSON - angularJS

Question

Я пытаюсь динамически заполнить количество таблиц вводом, полученным через JSON в angularJS.

Я озадачен тем, что использовать и как использовать, поскольку я учусь на угловых.

Было бы полезно, если бы кто-нибудь мог помочь.

У меня есть этот JSON, полученный в моем скрипте.

{
  "took": 167,
  "timed_out": false,
  "_shards": {
    "total": 10,
    "successful": 10,
    "skipped": 0,
    "failed": 0
  },
  "hits": {
    "total": 2,
    "max_score": 22.126987,
    "hits": [
      {
        "_type": "data",
        "_id": "3423",
        "_score": 22.126987,
        "_source": {
          "mdmId": "45234",
          "fullName": "rick j cruz",
          "firstName": "rick",
          "middleName": "j",
          "lastName": "cruz",
          "gender": "MALE",
          "employeeInd": "N",
          "phoneList": [],
          "partyAdresses": [
            {
              "addressType": "home",
              "address1": "xxx",
              "address2": "yyy",
              "city": "SAN JOSE",
              "state": "CA",
              "zipCode": "zzz"
            },
            {
              "addressType": "mailing",
              "address1": "xxx",
              "address2": "yyy",
              "city": "SAN JOSE",
              "state": "CA",
              "zipCode": "zzz"
            }
          ],
          "policyList": [
            {
              "agencyCode": "50000",
              "agentid": "500",
              "sourceSystem": "unit",
              "policyNumber": "123",
              "policyNumberRaw": "123",
              "policyStatus": "CANCELLED",
              "roleList": [
                {
                  "roleType": "INSURED",
                  "roleStatus": "ACTIVE",
                },
                {
                  "roleType": "LISTED DRIVER",
                  "roleStatus": "ACTIVE",
                }
              ]
            }
          ]
        }
      },
      {
        "_type": "data",
        "_id": "3423",
        "_score": 22.126987,
        "_source": {
          "mdmId": "45234",
          "fullName": "rick j cruz",
          "firstName": "rick",
          "middleName": "j",
          "lastName": "cruz",
          "gender": "MALE",
          "employeeInd": "N",
          "phoneList": [],
          "partyAdresses": [
            {
              "addressType": "home",
              "address1": "xxx",
              "address2": "yyy",
              "city": "SAN JOSE",
              "state": "CA",
              "zipCode": "zzz"
            },
            {
              "addressType": "mailing",
              "address1": "xxx",
              "address2": "yyy",
              "city": "SAN JOSE",
              "state": "CA",
              "zipCode": "zzz"
            }
          ],
          "policyList": [
            {
              "agencyCode": "50000",
              "agentid": "500",
              "sourceSystem": "unit",
              "policyNumber": "123",
              "policyNumberRaw": "123",
              "policyStatus": "CANCELLED",
              "roleList": [
                {
                  "roleType": "INSURED",
                  "roleStatus": "ACTIVE",
                },
                {
                  "roleType": "LISTED DRIVER",
                  "roleStatus": "ACTIVE",
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

Теперь мне нужно заполнить две разные таблицы на основе итоговое значение , упомянутое в JSON.

В случае, если JSON возвращает 3, необходимо заполнить 3 таблицы.Например: формат ниже.

Может ли кто-нибудь помочь мне с скрипкой или чем-то?

Answer 1

Поскольку вы хотите визуализировать n"хитов" с (я думаю) сомнительным стилем и намного большей информацией, чем описано, я думаю, вам следует поместить это в небольшую директиву:

angular.module('myApp').directive('hitTable', function() {
  return {
    scope: {
      hit: '='
    },
    templateUrl: 'views/hitTable.html'
  }
});

hitTable.html может выглядеть следующим образом (на основе примеров полей в вопросе, добавьте больше информации, которую вы хотите визуализировать, и вы должны выполнить стилизацию самостоятельно):

<div>
  <div> {{ hit._source.mdmId }}</div> <!-- sample box #1 -->
    <div> {{ hit._source.firstName }}, {{ hit._source.lastName }}</div> <!-- sample box #2 -->
    <div>
      <span ng-repeat="address in hit._source.partyAdresses"> <!-- n of sample box #3 -->
        {{ address.address1 }}
        {{ address.city }}
        {{ address.state }}
     </span>
  </div>
<div>

После регистрации вваше приложение и предполагая, что $scope.data содержит образец JSON выше, вы можете сделать

<div ng-repeat="hit in data.hits.hits">
  <hit-table hit="hit"></hit-table>
</div>

На мой взгляд, это реальная сила AngularJS (и тому подобное).Без особых усилий вы можете получить довольно сложную структуру страницы.Теперь вам нужно стилизовать каждый «хит», то есть содержимое hitTable.html.

Примечание: я намеренно забываю все о «общем» здесь.Важным является контент, который вы хотите визуализировать, то есть то, что находится в JSON.