How To Get Date Value From A JSON File in Angular6 - json

Question

I have a json file called data.json in my assets folder
[
{
"id": 1,
"project_name": "X project",
"project_date": "December 1, 2019 at 9:03:01 AM GMT+1",
"project_status": "vip",
"rating": "5 star"
}
]
Here Is my Angular service called home.service.ts
projectList = '../../../assets/data.json';
getProject() {
return this.httpService
.get(this.projectList)
.map(res => JSON.parse(res.text(), this.reviver));
}
reviver(key, value): any {
if ('project_date' === key) {
return new Date(value);
}
return value;
}
Here is my component.ts file
projects: string[];
showProject() {
this.homeservice.getProject().subscribe(
data => {
this.projects= data as string[];
console.log(this.projects);
},
(err: HttpErrorResponse) => {
console.log(err.message);
}
);
}
And this is my html file
<div *ngFor="let project of projects">
<h5>{{ project.project_date | date }}</h5>
</div>
The error I'm getting is:
res.text is not a function in home.service.ts
If I try it without the .map(res => JSON.parse(res.text(), this.reviver));
I get this error:
Invalid argument 'December 1, 2019 at 9:03:01 AM GMT+1' for pipe 'DatePipe'
Does anyone have a solution to how I can display this on the web page as a date? Thanks.

Answer 1

Your date should look like the following (without at):
"December 1, 2019 9:03:01 AM GMT+1"
There is no need to parse the response of your http request since it is done natively by angular
getProject() {
return this.httpService
.get(this.projectList)
}
To display the date using a format
{{project.project_date | date:'h:mm a z'}}