title: Data is not getting displayed in the html data, when it is stored in db.json
body: <p>I have stored some data in db.json. In the ts file I have used the get function and received it in a variable. The data is coming through successfully( I checked using console.log). However it is not displaying in the html table i have created.</p>
  <p>Below is my html file</p>
  <pre><code>&lt;p&gt;people works!&lt;/p&gt;
  
  &lt;table mat-table [dataSource]=&quot;dataSource&quot; class=&quot;mat-elevation-z8&quot;&gt;
  
  &lt;!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition&quot; --&gt;
  
  &lt;!-- Position Column --&gt;
  &lt;ng-container matColumnDef=&quot;id&quot;&gt;
    &lt;th mat-header-cell *matHeaderCellDef&gt; No. &lt;/th&gt;
    &lt;td mat-cell *matCellDef=&quot;let element; let i = index&quot;&gt; {{i+1}} &lt;/td&gt;
  &lt;/ng-container&gt;
  
  &lt;!-- Name Column --&gt;
  &lt;ng-container matColumnDef=&quot;name&quot;&gt;
    &lt;th mat-header-cell *matHeaderCellDef&gt; Name &lt;/th&gt;
    &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.name}} &lt;/td&gt;
  &lt;/ng-container&gt;
  
  &lt;!-- Weight Column --&gt;
  &lt;ng-container matColumnDef=&quot;company&quot;&gt;
    &lt;th mat-header-cell *matHeaderCellDef&gt; Comapnay &lt;/th&gt;
    &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.company}} &lt;/td&gt;
  &lt;/ng-container&gt;
  
  &lt;!-- Symbol Column --&gt;
  &lt;ng-container matColumnDef=&quot;email&quot;&gt;
    &lt;th mat-header-cell *matHeaderCellDef&gt; Email &lt;/th&gt;
    &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.email}} &lt;/td&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef=&quot;address&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Address &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.address}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef=&quot;active&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Active &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.active}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef=&quot;action&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Action &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element; let j = index&quot;&gt;&lt;button (click) = &quot;detail(j)&quot;&gt; {{element.action}} &lt;/button&gt;&lt;/td&gt;
    &lt;/ng-container&gt;
  
   &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
   &lt;/table&gt;
    
  &lt;div id = &quot;Detail&quot;&gt;
    {{userDetail.id}}&lt;br&gt;
    {{userDetail.name}}&lt;br&gt;
    {{userDetail.company}}&lt;br&gt;
    {{userDetail.email}}&lt;br&gt;
    {{userDetail.active}}&lt;br&gt;
    {{userDetail.action}}
   &lt;/div&gt;
  </code></pre>
  <p>And the next code is my ts file</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { user } from './userInterface';
  
  @Component({
  selector: 'app-people',
  templateUrl: './people.component.html',
  styleUrls: ['./people.component.css']
  })
  export class PeopleComponent implements OnInit {
  
   displayedColumns=[&quot;id&quot;,&quot;name&quot;,&quot;company&quot;,&quot;email&quot;,&quot;address&quot;,&quot;active&quot;,&quot;action&quot;];
   UserDb:user[]=[];
  
   dataSource = this.UserDb;
   userDetail: user={
    id: 0,
    name: '',
    company: '',
     email: '',
    address: '',
    active: false,
    action: ''
  };
  
  detail(rowid: number) {
    this.userDetail = this.UserDb[rowid];
  }
  
  
   constructor(private _http: HttpClient) { 
  
   }
  
   ngOnInit(): void {
  
    console.log(&quot;im working&quot;);
    this._http.get(&quot;http://localhost:3002/posts&quot;).subscribe((users:any)=&gt;{
      this.UserDb = users;
      console.log(this.UserDb);
     })
  
   }
  
   }
  </code></pre>
  <p>`</p>
  <p>My entire data is being shown in the console.</p>
  <p><a href="https://i.stack.imgur.com/u85xE.png" rel="nofollow noreferrer">data in the console. But not showing under the table</a></p>