CODEWITHSUNDEEP
jsonangulartypescript
desoga
desoga

Reputation: 4895

How To Get Date Value From A JSON File in Angular6

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.

Upvotes: 2

Views: 686

Answers (1)

edkeveked
edkeveked

Reputation: 18371

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'}}

Upvotes: 2

Related Questions