Unable to display the row data in angular material table

Question

I have a dynamic JSON by using which I want to display the table the issue is any key with dot notation is not able display in the row below is my code

.ts code :

  displayedColumns: string[] = ['_id', 'subdomain', 'domain', 'part_id','info.mimetype','infodependent'];
  dataSource = [];
  public data = [
    {
      "_id": "c9d5ab1a",
      "subdomain": "wing",
      "domain": "aircraft",
      "part_id": "c9d5ab1a",
      "info.mimetype": "application/json",
      "infodependent": "parent"
    },
    {

      "_id": "c1859902",
      "subdomain": "tail",
       "domain": "aircraft",
       "part_id": "c1859902",
       "info.mimetype": "image/jpeg",
       "infodependent": "c9d5ab1a",
    },
    {
      "_id": "1b0b0a26",
      "subdomain": "fuel",
      "domain": "aircraft",
      "part_id": "1b0b0a26",
      "info.mimetype": "image/jpeg",
      "infodependent": "no_parent"
    }
  ]

  constructor(){
    console.log(this.data);
    this.displayedColumns;
    this.dataSource = this.data;
  }

.html code

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


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


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


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


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


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

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


</table>

currently when i am using the above code my table is displayed like below

now i need two clarification 1. why with dot notation the values is not displaying ? 2. even though the other field is not having the dot notation why it is not displaying the filed?

Looking at your code it looks like you're probably getting an error similar to property 'info' does not exist on object 'element' or something. Like with plain js the using symbols or spaces like . the property name needs to be surrounded in quotes and called using bracket notation. Try {{element['info.mimetype']}} instead — Michael Sorensen
– Michael Sorensen, Commented Sep 3, 2019 at 16:11
@MichaelSorensen it is working now with {{element['info.mimetype']}} — Dexter
– Dexter, Commented Sep 3, 2019 at 16:16

Michael Sorensen · Accepted Answer · 2019-09-03 16:17:29Z

1

Looking at your code it looks like you're probably getting an error similar to property 'info' does not exist on object 'element' or something. Like with plain js the using symbols or spaces like . the property name needs to be surrounded in quotes and called using bracket notation. Try {{element['info.mimetype']}} instead

answered Sep 3, 2019 at 16:17

Michael Sorensen

2,14418 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to display the row data in angular material table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related