after close dialog datasource updating with Dialog result: [object Object]

Question

I have angular 8 application and using material with dialog.

After the dialog has been closed then the datasource is updated. But not every field is displaying the correct value.

So this is the openCreateDialog:

  openCreateDialog(id: string) {
    this.dialog
      .open(DuplicateEcheqComponent, { data: { id: id } })
      .afterClosed()
      .subscribe(result => {
        this.datasource.data.push(result);
        console.log(`Dialog result: ${result}`);
        this.datasource =  JSON.parse(JSON.stringify(this.datasource.data));
        this.changeDetectorRefs.detectChanges();
      });
  }

But the console.log gives this as output:

Dialog result: [object Object]

So what I have to change?

Thank you

if I do this:

  console.log('Dialog result:',  result);

This is the result:

Dialog result: {id: "37838933-1630-4702-3f80-08d81cf3abe2", family: "f31b7950-485a-455b-bf76-6437ed45d60b", title: "rrrrr", createdBy: "d9824535-c6b0-40cf-84e2-d9e37b02a5db", createdByName: "", …}

But this I as result:

[object Object] 30 Jun 20   d9824535-c6b0-40cf-84e2-d9e37b02a5db

but it has to be like this format:

yyy Niet gepubliceerd   1   30 Jun 20   

This is my html:

<div class="header header-search-and-add">
  <div>
    <a
      class="echeq-menu-button echeq-menu-button-new button-add-echeq"
      mat-fab
      [routerLink]="['../new']"
      i18n-title title="Nieuw"
    >
      <mat-icon>add</mat-icon>
    </a>
    <span *ngIf="!isArchive; else archive">
      <h1 class="heading" i18n>V-CHEQ configuration</h1>
      <a
      mat-button
      [routerLink]="['../archive']"
      >
        <span i18n>Archived V-CHEQ'S</span>
        <mat-icon>chevron_right</mat-icon>
      </a>
    </span>
    <ng-template #archive>
      <h1 class="heading" i18n>V-CHEQ archive</h1>
      <a
      mat-button
      [routerLink]="['../list']"
      >
        <mat-icon>chevron_left</mat-icon>
        <span i18n>V-CHEQ'S configuration</span>
      </a>
    </ng-template>
  </div>
  <div class="header-search mat-elevation-z8 header-search-search">
    <mat-form-field>
      <input
        matInput
        placeholder="Filter"
        i18n-placeholder
        (keyup)="applyFilter($event.target.value)"
      />
    </mat-form-field>
  </div>
</div>
<div class="body pulled-up">
  <div class="mat-elevation-z8">
    <table
      mat-table
      class="full-width-table"
      [dataSource]="datasource"
      matSort
      aria-label="Elements"
    >
      <!-- Name Column -->
      <ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Name</th>
        <td mat-cell *matCellDef="let row">{{ row.title }}</td>
      </ng-container>

      <ng-container matColumnDef="published">
        <th
          mat-header-cell
          *matHeaderCellDef
          mat-sort-header="wasPublished"
          i18n
        >
          Published
        </th>
        <td mat-cell *matCellDef="let row">
          {{ translatePublished(row.wasPublished) }}
        </td>
      </ng-container>

      <ng-container matColumnDef="createdBy">
        <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>
          Created by
        </th>
        <td mat-cell *matCellDef="let row">{{ row.createdBy }}</td>
      </ng-container>

      <ng-container matColumnDef="createdOnUtc">
        <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Date</th>
        <td mat-cell *matCellDef="let row">
          {{ row.createdOnUtc | date: 'dd MMM yy' }}
        </td>
      </ng-container>

      <ng-container matColumnDef="pages">
        <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Pages</th>
        <td mat-cell *matCellDef="let row">{{ row.pages }}</td>
      </ng-container>

      <!-- Will want to do this differently -->
      <ng-container matColumnDef="edit">
        <th mat-header-cell *matHeaderCellDef i18n>Edit</th>
        <td mat-cell *matCellDef="let row">
          <a mat-button mat-icon-button (click)="openEcheqVersionDialog(row)"
            ><mat-icon>list</mat-icon></a
          >
          <a
            mat-button
            mat-icon-button
            [routerLink]="['../', row.family, 'draft']"
            ><mat-icon>edit</mat-icon></a
          >
        </td>
      </ng-container>

      <ng-container matColumnDef="dupliceren">
        <th mat-header-cell *matHeaderCellDef i18n>duplicate</th>
        <td mat-cell *matCellDef="let row">

          <a
            mat-button
            mat-icon-button

            (click)="openCreateDialog(row.definitions[0].id)"
            ><mat-icon>filter_none</mat-icon></a
          >
        </td>
      </ng-container>

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

    <mat-paginator [pageSizeOptions]="[25, 50, 100, 250]"></mat-paginator>
  </div>
</div>

Answer 1

You can simply use the angluar json pipe to see the attributes of the object and then descide which you want to output by accesing the result object with a result.whateveryouwanttoaccess

${result | json}