title: how to get data from nested json in angular material tables ? - ANGULAR
body: <p>im trying to get data from localhost, but when it comes on diffrent structure i can't understand how to get those datas on data user. any helps ? </p>
  
  <p>and this is how im trying to approach but failed and get
  ERROR Error: Could not find column with id "_id".</p>
  
  <p>Json File</p>
  
  <pre><code>{
    "message": "Handling GET requests to User",
    "dataUser": [
      {
        "CountLike": 15,
        "CountShare": 26,
        "id": "5edb6d50d77987442cf1d7ed",
        "Name": "Andy",
        "Point": 40
      }
    ]
  }
  </code></pre>
  
  <p>and this is my servise.ts files</p>
  
  <pre><code>getUsers() {
      return this.http.get('http://localhost:3000/surveys');
  }
  </code></pre>
  
  <p>this is my html files</p>
  
  <pre><code>&lt;mat-table [dataSource]="dataSource" class="mat-elevation-z8"&gt;
    &lt;ng-container matColumnDef="dataUser _id"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;ID&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt;
        {{ element.dataUser._id }}
      &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Name Column --&gt;
    &lt;ng-container matColumnDef="dataUser CountLike"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;Like&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt;
        {{ element.dataUser.CountLike }}
      &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Weight Column --&gt;
    &lt;ng-container matColumnDef="dataSurvey CountShare"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;Share&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt;
        {{ element.dataUser.CountShare }}
      &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Symbol Column --&gt;
    &lt;ng-container matColumnDef="dataUser Point"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;Point&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt;
        {{ element.dataUser.Point }}
      &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
    &lt;tr
      mat-row
      *matRowDef="let row; columns: displayedColumns"
      (click)="selection.toggle(row)"
    &gt;&lt;/tr&gt;
  &lt;/mat-table&gt;
  </code></pre>
  
  <p>this is my component.ts files <em>ignore how im put name on the interface xD</em></p>
  
  <pre><code>export interface Userstructure {
    _id: string;
    CountLike: string;
    CountShare: string;
    Point: string;
  }
  export interface UserMain {
    message: string;
    dataUser: Userstructure[];
  }
  
  @component
  displayedColumns: string[] = [
      '_id',
      'CountLike',
      'CountShare',
      'Point',
    ];
  users: Userstructure[];
  dataSource;
  user;
  selection = new SelectionModel&lt;Userstructure&gt;(true, []);
  ngOnInit(): void {
  console.log(this.users);//this return 'undefined' on console.
  this.surveyService.getUsers().subscribe((users: Userstructure[]) =&gt; {
        this.users = users;
        this.dataSource = new MatTableDataSource(users);
      });
    }
  </code></pre>