Я пытаюсь отобразить данные в следующем формате? - PullRequest
Новая
       33

Я пытаюсь отобразить данные в следующем формате?

2 голосов
/ 14 февраля 2020

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

[
  {
    "Version": "989.999",
    "clue": [
      {
        "Id": 280,
        "Status": "QUEUED",
        "value": "XXXX-AA-99-22-11"        
      },
      {
        "Id": 280,
        "Status": "QUEUED",
        "value": "XXXX-AA-99-22-11"
      },
      {
        "Id": 346,
        "Status": "QUEUED",
        "value": "XXXX-AA-99-22-11"
      },
      {
        "Id": 346,
        "Status": "QUEUED",
        "value": "XXXX-AA-99-22-11"
      }
    ]    
  },
  {
    "Version": "989.131.1",
    "clue": [
      {
        "Id": 280,
        "Status": "QUEUED",
        "value": "XXXX-AA-99-22-11"        
      },
      {
        "Id": 346,
        "Status": "QUEUED",
        "value": "XXXX-AA-99-22-11"
      }
    ]    
  },
  {
    "Version": "989.131",
    "clue": [
      {
        "Id": 280,
        "Status": "QUEUED",
        "value": "XXXX-AA-99-22-11"        
      },
      {
        "Id": 346,
        "Status": "QUEUED",
        "value": "XXXX-AA-99-22-11"
      }
    ]    
  },

  {
    "Version": "989.122",
    "clue": [
      {
        "Id": 192,
        "Status": "CANCELLED",
        "value": "XXXX-890-FF"        
      },
      {
        "Id": 192,
        "Status": "CANCELLED",
        "value": "XXXX-891-FF"
      },
      {
        "Id": 192,
        "Status": "CANCELLED",
        "value": "XXXX-893-FF"
      },
      {
        "Id": 192,
        "Status": "CANCELLED",
        "value": "XXXX-895-FF"
      },
      {
        "Id": 197,
        "Status": "CANCELLED",
        "value": "XXXX-AA-99-22-11"
      },
      {
        "Id": 348,
        "Status": "CANCELLED",
        "value": "XXXX-890-FF"
      },
      {
        "Id": 348,
        "Status": "CANCELLED",
        "value": "XXXX-891-FF"
      },
      {
        "Id": 348,
        "Status": "CANCELLED",
        "value": "XXXX-893-FF"
      },
      {
        "Id": 348,
        "Status": "CANCELLED",
        "value": "XXXX-895-FF"
      },
      {
        "Id": 349,
        "Status": "CANCELLED",
        "value": "XXXX-AA-99-22-11"
      },
      {
        "Id": 350,
        "Status": "CANCELLED",
        "value": "XXXX-883-FF
      },
      {
        "Id": 350,
        "Status": "CANCELLED",
        "value": "XXXX-897-FF
      },
      {
        "Id": 352,
        "Status": "CANCELLED",
        "value": "XXXX-400-FF"
      },
      {
        "Id": 352,
        "Status": "NEW FAILURE",
        "value": "XXXX-875-FF"
      }
    ]
  }
]

в HTML таблица, как - я хочу уменьшить столбцы заголовка таблицы и соответствующие. Я новичок в javascript. 

    +--------------+---------+---------+---------+---------+
 ID |  XXXXXXXXXX  |   280   |   280   |   346   |   346   |  192       | 192      .... 352
    +--------------+---------+---------+---------+---------+
    | Version      |         |         |         |         |
    | 989.999      | QUEUED  | QUEUED  | QUEUED  | QUEUED  |  -         | -        ..... -
    | 989.131.1    | QUEUED  | -       | QUEUED  | -       |  -         |   -      ..... -
    | 989.122      | -       | -       |    -    | -       | CANCELLED | CANCELLED .....  NEW FAILURE
    +--------------+---------+---------+---------+---------+

Я пытался сделать в angular с помощью ng-repeat, но не повезло, что я смог получить заголовок таблицы из-за повторяющихся значений и не смог его уменьшить.

Решение Я попытался отобразить массив в шаблоне 

<tbody><tr class="alignCenter" ng-repeat="list in vm.list">
<td>{list.Version}}</td>
<td ng-repeat="arg in list.clue">{{arg.Status}}</td>
</tr>

Я читаю как сокращение, затем group by поможет в создании заголовка и заполнении соответствующих данных таблицы.

1 Ответ

0 голосов
/ 18 марта 2020

Я думаю, это то, что вы хотите:

Приложение:

https://angular-pviq9x.stackblitz.io

Редактор :

https://stackblitz.com/edit/angular-pviq9x

Извините, код требует очистки и рефакторинга.

...