Проблема с выводом Nested JSON в Mat-таблицу

Question

У меня есть Nested JSON, и я хочу вывести его в Mat-Table ... Не могли бы вы, ребята, помочь мне с этим, пожалуйста?

Я могу вывести json susa, как это сделать? Я вывожу mandantKagAccountEntity?

Мой код:

// Nested JSON

{
    "success": true,
    "susa": [
        {
            "accountlinevaluesId": 1,
            "accountlineId": 1,
            "mandantKagId": 660,
            "mandantAccountsId": 1,
            "period": "7",
            "accountNumber": 27,
            "name": "EDV-Hardware/Software",
            "amount": 55.16859,
            "mandantKagAccountEntity": {
                "mandantKagId": 660,
                "mandantId": 1,
                "kagNumber": 2000,
                "kagText": "A. I. 1. EDV-Software"
            }
        },
] }

// test.component.ts

private loadData() {
    const yearString = this.year ? `${this.year}` : `${new Date().getFullYear()}`;
    this.balanceListService.getDataForAllMonth(yearString).subscribe(
      (resp: any) => {
        const data = resp.success ? resp.susa : null;
        if (null !== data && data) {
         .... }
}
}

Answer 1

Зависит от того, что именно вы хотите передать на мат-таблицу. Если это массив вложенного свойства mandantKagAccountEntity, то это должно сработать:

const data = resp.success ? resp.susa.map((item) => item.mandantKagAccountEntity) : null;

Если вы хотите только самое первое вхождение mandantKagAccountEntity, вам не нужно перебирать весь вложенный объект:

const data = resp.success ? resp.susa[0]?.mandantKagAccountEntity : null;

// РЕДАКТИРОВАТЬ: у OP был вводящий в заблуждение вопрос. Он действительно хочет отобразить все данные, включая вложенный объект. Вот ответ на этот вопрос:

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

displayedColumns: string[] = [
  'accountlinevaluesId',
  'accountlineId',
  'mandantKagId',
  'mandantAccountsId',
  'period',
  'accountNumber',
  'name',
  'amount',
  'mandantKagAccountEntity-mandantKagId',
  'mandantKagAccountEntity-mandantId',
  'mandantKagAccountEntity-kagNumber',
  'mandantKagAccountEntity-kagText',
];

Каждый столбец нуждается в контейнере внутри mat-table, который определяет способ отображения свойства:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->


  <ng-container matColumnDef="accountlinevaluesId">
    <th mat-header-cell *matHeaderCellDef> accountlinevaluesId</th>
    <td mat-cell *matCellDef="let element"> {{element.accountlinevaluesId}}</td>
  </ng-container>

  <ng-container matColumnDef="accountlineId">
    <th mat-header-cell *matHeaderCellDef> accountlineId</th>
    <td mat-cell *matCellDef="let element"> {{element.accountlineId}}</td>
  </ng-container>

  <ng-container matColumnDef="mandantKagId">
    <th mat-header-cell *matHeaderCellDef> mandantKagId</th>
    <td mat-cell *matCellDef="let element"> {{element.mandantKagId}}</td>
  </ng-container>

  <ng-container matColumnDef="mandantAccountsId">
    <th mat-header-cell *matHeaderCellDef> mandantAccountsId</th>
    <td mat-cell *matCellDef="let element"> {{element.mandantAccountsId}}</td>
  </ng-container>

  <ng-container matColumnDef="period">
    <th mat-header-cell *matHeaderCellDef> period</th>
    <td mat-cell *matCellDef="let element"> {{element.period}}</td>
  </ng-container>

  <ng-container matColumnDef="accountNumber">
    <th mat-header-cell *matHeaderCellDef> accountNumber</th>
    <td mat-cell *matCellDef="let element"> {{element.accountNumber}}</td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> name</th>
    <td mat-cell *matCellDef="let element"> {{element.name}}</td>
  </ng-container>

  <ng-container matColumnDef="amount">
    <th mat-header-cell *matHeaderCellDef> amount</th>
    <td mat-cell *matCellDef="let element"> {{element.amount}}</td>
  </ng-container>

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> position</th>
    <td mat-cell *matCellDef="let element"> {{element.position}}</td>
  </ng-container>

  <ng-container matColumnDef="mandantKagAccountEntity-mandantKagId">
    <th mat-header-cell *matHeaderCellDef> mandantKagAccountEntity-mandantKagId</th>
    <td mat-cell *matCellDef="let element"> {{element.mandantKagAccountEntity.mandantKagId}}</td>
  </ng-container>

  <ng-container matColumnDef="mandantKagAccountEntity-mandantId">
    <th mat-header-cell *matHeaderCellDef> mandantKagAccountEntity-mandantId</th>
    <td mat-cell *matCellDef="let element"> {{element.mandantKagAccountEntity.mandantId}}</td>
  </ng-container>

  <ng-container matColumnDef="mandantKagAccountEntity-kagNumber">
    <th mat-header-cell *matHeaderCellDef> mandantKagAccountEntity-kagNumber</th>
    <td mat-cell *matCellDef="let element"> {{element.mandantKagAccountEntity.kagNumber}}</td>
  </ng-container>

  <ng-container matColumnDef="mandantKagAccountEntity-kagText">
    <th mat-header-cell *matHeaderCellDef> mandantKagAccountEntity-kagText</th>
    <td mat-cell *matCellDef="let element"> {{element.mandantKagAccountEntity.kagText}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Учитывая, что вы действительно хотите показать все данные, дальнейшее отображение ответа не требуется, кроме

this.dataSource = resp.success ? resp.susa : null;

Answer 2

Я решил проблему. Опять же для вашего понимания :) Код выводит весь объект JSON (включая вложенность). Надеюсь, я смогу помочь тем из вас, у кого точно такая же проблема, как и у меня.

// Fill the table with data
private loadData() {
this.balanceListService.getDataForAllMonth(yearString).subscribe(
          (resp: any) => {
            let data = resp.susa;
            if (null !== data && data) {
              data = data.map((item) => {
                const kag = item.mandantKagAccountEntity;
                delete item.mandantKagAccountEntity;
                return { ...item, ...kag }; // merge two objects into one
              });
}
});
}