Необходимо отобразить вложенный объект JSON в таблице данных материала.

Question

Я новичок в фреймворках Javascript.Мне нужно отобразить вложенный объект JSON, исходящий из моего бэкэнда, в виде полей столбца моего MatTableDataSource.Любая помощь будет оценена.

Это мой объект JSON:

[{
    "workstationId": 100,
    "assemblylineId": 100,
    "workstationDescription": "Testing1",
    "workstationTest": "Yes",
    "createdAt": "2019-03-20",
    "updatedAt": "2019-03-20",
    "assemblylines": [{
      "assemblylineName": "assembly1"
    }]
  },
  {
    "workstationId": 101,
    "assemblylineId": 100,
    "workstationDescription": "workstation1",
    "workstationTest": "No",
    "createdAt": "2019-04-04",
    "updatedAt": "2019-04-04",
    "assemblylines": [{
      "assemblylineName": "assembly5"
    }]
  },
  {
    "workstationId": 102,
    "assemblylineId": 101,
    "workstationDescription": "workstation2",
    "workstationTest": "No",
    "createdAt": "2019-04-04",
    "updatedAt": "2019-04-04",
    "assemblylines": [{
      "assemblylineName": "assembly4"
    }]
  },
  {
    "workstationId": 103,
    "assemblylineId": 102,
    "workstationDescription": "Testing2",
    "workstationTest": "Yes",
    "createdAt": "2019-04-04",
    "updatedAt": "2019-04-04",
    "assemblylines": [{
      "assemblylineName": "assembly3"
    }]
  }
]

Это мой пользовательский интерфейс: MatTableDataSource

Это моя рабочая станция.model.ts

export interface Workstation {
  workstationId: number;
  workstationDescription: string;
  workstationTest: string;
  assemblylines: {
    assemblylineName: string;
  };
}

Я проверил учебники по JSON Object Destructuring, Parsing, Stringification, но я не попал туда, так как сервис возвращает объект Workstation [] вместо объекта Workstation.Пожалуйста, дайте мне знать, если есть способ отобразить свойство assemblylineName в виде столбца с его значениями.

Answer 1

Вот ваша работа Stackblitz

Answer 2

Вы можете сделать что-то вроде этого:

.html

         <mat-table #table [dataSource]="workstationDataSource">

                // SR NUMBER
                <ng-container matColumnDef="sr_no">
                  <mat-header-cell *matHeaderCellDef>Sr. No.</mat-header-cell>
                  <mat-cell *matCellDef="let row">
                    <span>{{ row.workstationId }}</span>
                  </mat-cell>
                </ng-container>

                // DESCRIPTION
                <ng-container matColumnDef="description">
                  <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
                  <mat-cell *matCellDef="let row">
                    <span>{{ row.workstationDescription}}</span>
                  </mat-cell>
                </ng-container>

                // TEST
                <ng-container matColumnDef="test">
                  <mat-header-cell *matHeaderCellDef>Test</mat-header-cell>
                  <mat-cell *matCellDef="let row">
                    <span>{{ row.workstationTest}}</span>
                  </mat-cell>
                </ng-container>

                // ASSEMBLY LINES
                <ng-container matColumnDef="assembly_lines">
                  <mat-header-cell *matHeaderCellDef>Assembly Line</mat-header-cell>
                  <mat-cell *matCellDef="let row">
                    <span>{{ row.assemblylines.assemblylineName }}</span>
                  </mat-cell>
                </ng-container>

                // ACTIONS
                <ng-container matColumnDef="actions">
                  <mat-header-cell *matHeaderCellDef></mat-header-cell>
                  <mat-cell *matCellDef="let row">
                    <button (click)="edit(row)">EDIT</button>
                    <button (click)="delete(row)">DELETE</button>                    
                  </mat-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

          </mat-table>

.ts

...
displayedColumns = [
  'sr_no',
  'description',
  'test',
  'assembly_lines',
  'actions'
];
workstationDataSource: MatTableDataSource<Workstation>;
...

// then you will need to populate the 'workstationDataSource' variable
getWorkstations() {
  this.http.get(...).subscribe(res => {
    ...
    this.workstationDataSource.data = new MatTableDataSource<Workstation>();
    this.workstationDataSource.data = res;
    ...
  });
}
...

Надеюсь, это поможет.