title: How to read a file json in Angular 7 by using http module?
body: <h3>Read JSON file in Angular 7</h3>
  
  <p>I am writing a simple program to output an array of data from a json file to a browser.</p>
  
  <p>When I try to read a json file, I get an error:
  Cannot read property 'code' of undefined.</p>
  
  <h3>app.module.ts :</h3>
  
  <pre><code>import { HttpClientModule } from '@angular/common/http';
  
  @NgModule({
    declarations: [
      AppComponent,
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      RouterModule.forRoot(appRoutes),
      HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <h3>app.component.ts :</h3>
  
  <pre><code>import { Component } from '@angular/core';
  import { HttpClient, HttpParams } from '@angular/common/http';
  import { Observable } from 'rxjs';
  import { map } from 'rxjs/operators';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  
     countries: any;
  
     constructor(private http : HttpClient) { }
  
     ngOnInit(){
         this.http.get("...path to json file...")
         .subscribe((data) =&gt; this.displaydata(data));
     }
  
     displaydata(data) {this.countries = data;}
  }
  </code></pre>
  
  <h3>app.component.html :</h3>
  
  <pre><code>&lt;table&gt;
  &lt;tr &gt;
    &lt;th&gt;ID&lt;/th &gt;
    &lt;th&gt;code&lt;/th &gt;
    &lt;th&gt;name&lt;/th &gt;
    &lt;th&gt;population&lt;/th &gt;
  &lt;/tr &gt;
    &lt;tr ng-repeat="country in countries"&gt;
    &lt;td&gt;{{country.code}}&lt;/td&gt;
    &lt;td&gt;{{country.name}}&lt;/td&gt;
    &lt;td&gt;{{country.population}}&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>