CODEWITHSUNDEEP
angularangular-material
Dexter
Dexter

Reputation: 528

Unable to display the row data in angular material table

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 table code

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?

Upvotes: 0

Views: 509

Answers (1)

Michael Sorensen
Michael Sorensen

Reputation: 2124

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

Upvotes: 1

Related Questions