Using TypeScript to convert a JSON date string into a Date object

Question

Using TypeScript to convert a JSON date string into a Date object

The backend is sending me a JSON data structure that resembles the following:

[{
    "schedulingId": "7d98a02b-e14f-43e4-a8c9-6763ba6a5e76",
    "schedulingDateTime": "2019-12-28T14:00:00",
    "registrationDateTime": "2019-12-24T16:47:34",
    "doctorViewModel": {
        "doctorId": "a49d9534-65a6-4730-ac45-4dc2f91165e0",
        "doctorName": "Ana"
    },
    "personViewModel": {
        "personId": "3607c475-e287-4e83-85e6-a46f4a0116d6",
        "personName": "João",
        "birthDate": "1970-09-18T00:00:00"
    },
    "consultaViewModel": null
}]

My goal is to parse this JSON into a Scheduling object with date format 'dd/MM/yyyy hh:MM:ss':

export interface Scheduling {
   schedulingId : string;
   schedulingDateTime : Date;
   registrationDateTime : Date;
   person : Person;
   doctor : Doctor;
   consulta? : Consulta;
}

export interface Person {
   personId : string;
   personName : string;
   birthDate : Date;
}

export interface Doctor {
    doctorId : string;
    doctorName : string;
}

export interface Consulta {
    consultaId : string;
    consultaDateTime : Date;
}

After calling my get method, I need to figure out how to deserialize the JSON properly:

this.httpClient.get<Scheduling>(`${applicationUrl}/scheduling/${date}`);

json angular typescript

Answer 1

Answer №1

There are a couple of methods to achieve this goal, utilizing direct mapping and constructor usage.

You have the option to utilize the pipe and map operator from the rxjs/operators library.

1. Direct Mapping

import { map } from "rxjs/operators";

this.httpClient.get<Scheduling>(`${applicationUrl}/scheduling/${date}`)
   .pipe(
        map(scheduling => {
          scheduling.schedulingDateTime = new Date(scheduling.schedulingDateTime);
          scheduling.registrationDateTime = new Date(scheduling.registrationDateTime);
          scheduling.personViewModel.birthDate = new Date(scheduling.personViewModel.birthDate);
          return scheduling;
        })
    );

2. Utilizing Constructors

In this method, each JSON object received will be passed into the constructors of classes for date parsing.

export class Person {
  personId: string;
  personName: string;
  birthDate: Date;

  constructor(init: Person) {
    this.personId = init.personId;
    this.personName = init.personName;
    this.birthDate = parseDate(init.birthDate);
  }
}

export class Consulta {
  consultaId: string;
  consultaDateTime: Date;

  constructor(init: Consulta) {
    this.consultaId = init.consultaId;
    this.consultaDateTime = parseDate(init.consultaDateTime);
  }
}

export class Doctor {
  doctorId: string;
  doctorName: string;

  constructor(init: Doctor) {
    this.doctorId = init.doctorId;
    this.doctorName = init.doctorName;
  }
}


export class Scheduling {
  schedulingId: string;
  schedulingDateTime: Date;
  registrationDateTime: Date;
  person: Person;
  doctor: Doctor;
  consulta?: Consulta;

  constructor(init: Scheduling) {

    this.schedulingId = init.schedulingId;

    this.schedulingDateTime = parseDate(init.schedulingDateTime);
    this.registrationDateTime = parseDate(init.registrationDateTime);

    this.Person = init.Person !== undefined ? new Person(init.Person) : undefined;
    this.Consulta = init.Consulta !== undefined ? new Consulta(init.Consulta) : undefined;
    this.Doctor = init.Doctor !== undefined ? new Doctor(init.Doctor) : undefined;
  }
}



export function parseDate(str: string | Date): Date {
  if (str !== undefined && str !== null) {
    return new Date(str);
  }
  return undefined;
}

Service

this.http.get<Scheduling[]>(`${applicationUrl}/scheduling/${date}`)
      .pipe(
        map(schedulings => {
          const modifiedSchedulings = []
          for (const scheduling of schedulings) {
            modifiedSchedulings.push(new Scheduling(scheduling));
          }
          return modifiedSchedulings;
        })
      );

Answer 2

There are a couple of methods to achieve this goal, utilizing direct mapping and constructor usage.

You have the option to utilize the pipe and map operator from the rxjs/operators library.

1. Direct Mapping

import { map } from "rxjs/operators";

this.httpClient.get<Scheduling>(`${applicationUrl}/scheduling/${date}`)
   .pipe(
        map(scheduling => {
          scheduling.schedulingDateTime = new Date(scheduling.schedulingDateTime);
          scheduling.registrationDateTime = new Date(scheduling.registrationDateTime);
          scheduling.personViewModel.birthDate = new Date(scheduling.personViewModel.birthDate);
          return scheduling;
        })
    );

2. Utilizing Constructors

In this method, each JSON object received will be passed into the constructors of classes for date parsing.

export class Person {
  personId: string;
  personName: string;
  birthDate: Date;

  constructor(init: Person) {
    this.personId = init.personId;
    this.personName = init.personName;
    this.birthDate = parseDate(init.birthDate);
  }
}

export class Consulta {
  consultaId: string;
  consultaDateTime: Date;

  constructor(init: Consulta) {
    this.consultaId = init.consultaId;
    this.consultaDateTime = parseDate(init.consultaDateTime);
  }
}

export class Doctor {
  doctorId: string;
  doctorName: string;

  constructor(init: Doctor) {
    this.doctorId = init.doctorId;
    this.doctorName = init.doctorName;
  }
}


export class Scheduling {
  schedulingId: string;
  schedulingDateTime: Date;
  registrationDateTime: Date;
  person: Person;
  doctor: Doctor;
  consulta?: Consulta;

  constructor(init: Scheduling) {

    this.schedulingId = init.schedulingId;

    this.schedulingDateTime = parseDate(init.schedulingDateTime);
    this.registrationDateTime = parseDate(init.registrationDateTime);

    this.Person = init.Person !== undefined ? new Person(init.Person) : undefined;
    this.Consulta = init.Consulta !== undefined ? new Consulta(init.Consulta) : undefined;
    this.Doctor = init.Doctor !== undefined ? new Doctor(init.Doctor) : undefined;
  }
}



export function parseDate(str: string | Date): Date {
  if (str !== undefined && str !== null) {
    return new Date(str);
  }
  return undefined;
}

Service

this.http.get<Scheduling[]>(`${applicationUrl}/scheduling/${date}`)
      .pipe(
        map(schedulings => {
          const modifiedSchedulings = []
          for (const scheduling of schedulings) {
            modifiedSchedulings.push(new Scheduling(scheduling));
          }
          return modifiedSchedulings;
        })
      );

Answer 3

Answer №2

By transforming interfaces into classes, constructors can be created to facilitate the return of the desired response.

The classes are now defined as follows:

export class Scheduling {
  constructor(
    public schedulingId: string,
    public schedulingDateTime: Date,
    public registrationDateTime: Date,
    public person: Person,
    public doctor: Doctor,
    public consultation?: Consultation
  ) {}
}

export class Person {
  constructor(
    public personId: string,
    public personName: string,
    public birthDate: Date
  ) {}
}

export class Doctor {
  constructor(public doctorId: string, public doctorName: string) {}
}

export class Consultation {
  constructor(public consultationId?: string, public consultationDateTime?: Date) {}
}

Now it is possible to map the response using the defined classes in the following way:

this.httpClient.get<Scheduling[]>(`${applicationUrl}/scheduling/${date}`).pipe(
  map((schArr: any[]) => {
    const resp: Scheduling[] = [];
    schArr.forEach(sch => {
      resp.push(
        new Scheduling(
          sch.schedulingId,
          new Date(this.datePipe.transform(sch.schedulingDateTime, this.FORMAT)),
          new Date(this.datePipe.transform(sch.registrationDateTime, this.FORMAT)),
          new Person(
            sch.personViewModel.personId,
            sch.personViewModel.personName,
            new Date(this.datePipe.transform(sch.personViewModel.birthDate, this.FORMAT))
          ),
          new Doctor(sch.doctorViewModel.doctorId, sch.doctorViewModel.doctorName),
          sch.consultationViewModel != null
            ? new Consultation(sch.consultationViewModel.consultationId, sch.consultationViewModel.consultationId)
            : null
        )
      );
    });
    return resp;
  })
);

For better readability, define a constant named format and inject the DatePipe service:

constructor(private datePipe: DatePipe, private httpClient: HttpClient) {}
FORMAT = "yyyy-MM-dd HH:mm:ss";

Visit Stackblitz for demonstration

Answer 4

By transforming interfaces into classes, constructors can be created to facilitate the return of the desired response.

The classes are now defined as follows:

export class Scheduling {
  constructor(
    public schedulingId: string,
    public schedulingDateTime: Date,
    public registrationDateTime: Date,
    public person: Person,
    public doctor: Doctor,
    public consultation?: Consultation
  ) {}
}

export class Person {
  constructor(
    public personId: string,
    public personName: string,
    public birthDate: Date
  ) {}
}

export class Doctor {
  constructor(public doctorId: string, public doctorName: string) {}
}

export class Consultation {
  constructor(public consultationId?: string, public consultationDateTime?: Date) {}
}

Now it is possible to map the response using the defined classes in the following way:

this.httpClient.get<Scheduling[]>(`${applicationUrl}/scheduling/${date}`).pipe(
  map((schArr: any[]) => {
    const resp: Scheduling[] = [];
    schArr.forEach(sch => {
      resp.push(
        new Scheduling(
          sch.schedulingId,
          new Date(this.datePipe.transform(sch.schedulingDateTime, this.FORMAT)),
          new Date(this.datePipe.transform(sch.registrationDateTime, this.FORMAT)),
          new Person(
            sch.personViewModel.personId,
            sch.personViewModel.personName,
            new Date(this.datePipe.transform(sch.personViewModel.birthDate, this.FORMAT))
          ),
          new Doctor(sch.doctorViewModel.doctorId, sch.doctorViewModel.doctorName),
          sch.consultationViewModel != null
            ? new Consultation(sch.consultationViewModel.consultationId, sch.consultationViewModel.consultationId)
            : null
        )
      );
    });
    return resp;
  })
);

For better readability, define a constant named format and inject the DatePipe service:

constructor(private datePipe: DatePipe, private httpClient: HttpClient) {}
FORMAT = "yyyy-MM-dd HH:mm:ss";

Visit Stackblitz for demonstration

Using TypeScript to convert a JSON date string into a Date object

Answer №1

Answer №2

Similar questions

An error occurs when attempting to redirect with getServerSideProps

Maintaining the selected option on page refresh with React Remix

Retrieving routing information from directives within angular2

How can TypeScript objects be serialized?

What are the steps to save information to Firebase's Realtime Database?

Encountering difficulty invoking a component method from d3's call() function

Error in validating control groups in Angular 4

Strategies for handling superfluous or calculated information within Angular form components

I am looking for guidance on the proper way to import MatDrawer and MatDrawerContainer in the app.module.ts file for an Angular

Obtaining data from JSON using JSON path

Retrieve highlighted text along with its corresponding tag in ReactJS

Retrieving a JSON object from a serialized string using C#

"Encountering an issue with Express.json where it fails to parse the

Dynamic rows in an Angular 2 Material data table

Struggling to find a solution for directing to the featured homes page without the content overlapping with my navbar and search component. Any assistance would be greatly

Matching Tables with JavaScript and JSON

Troubleshooting: WordPress integration with PhoneGap not processing JSON data

What are the steps to styling a component with CSS Emotion?

A more efficient method for querying documents based on ids that are not in a given list and then sorting them by a specific publish date

A more effective strategy for avoiding the use of directives or jQuery in AngularJS