Showing data from a json file in Angular - json

Question

This is my home.component.ts file:
import { Component, OnInit } from '#angular/core';
import {HttpClient, HttpResponse, HttpHeaders} from '#angular/common/http';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private http: HttpClient) { }
cars=[];
fetchData=function(){
this.http.get("http://localhost:3000/cars").subscribe(
(res:Response)=>{
this.cars=res.json();
}
)
}
ngOnInit() {
this.fetchData();
}
}
home.component.html file:
<h1>Cars</h1>
<table>
<th>Id</th>
<th>Brand</th>
<th>Model</th>
<tr *ngFor="let car of cars">
<td>{{car.id}}</td>
<td>{{car.brand}}</td>
<td>{{car.model}}</td>
</tr>
</table>
and cars.json file:
{
"cars": [
{
"id": 1,
"brand": "Seat",
"model" : "Leon"
},
{
"id": 2,
"brand": "Mercedes",
"model" : "AMG"
}
]
}
I started the json server and compiled the project. The outcome is just the table structure without the fetched data. The json server is listening on the 3000 port and i'm using angular 7.0.3 version. Can somebody help me?

Answer 1

Try this:
const fs = require('fs');
let rawdata = fs.readFileSync('cars.json');
let cars = JSON.parse(rawdata);
or
const mycars = JSON.stringify(rawdata);
console.log(mycars);

Answer 2

cars=[];
fetchData=function(){
this.http.get("http://localhost:3000/cars").subscribe(
(res:Response)=>{
this.cars=res;
}
)
}
This fixed my problem. Thank you for the help.