Angular automatically interprets strings as dates

Question

Angular automatically interprets strings as dates

Currently, I have numerous entities that have been defined:

export class Meeting implements IHasId {
    id = 0;
    locationId = 0;
    meetTime = new Date();
    isFinalized = false;
    imageId: number = null;
    description = '';
    name = '';
}

Alongside this, I utilize a generic crud service that is responsible for resolving these entities to their original type

export class ApiResourceBaseService<T extends IHasId> {
  get(id: number): Observable<T> {
    return this.http.get<T>(`${this.apiUrl}/${this.route}/${id}`);
  }
}

Although Typescript Generics are quite useful, there is an issue when I call get<T> as Typescript incorrectly assumes that my JSON data is accurate. This results in my date objects being resolved as strings instead of dates.

Given the multiple entities I have, it becomes tedious to create custom constructors/adapters to parse the dates.

Does anyone have a more efficient solution to automatically resolve dates?

json angular typescript date

Answer 1

Answer №1

My approach involves utilizing an interceptor for data transformation. While I plan to automate the generation of models and API resources from documentation in the future, I'm currently employing the following workaround:

export class ModelBinderInterceptor implements HttpInterceptor {

    // Regular expression for ISO 8601 Date.
    DATE_TIME_TIMEZONE_REGEXP =
    /^(-?(?:[1-9][0-9]*)?[0-9]{4})-(1[0-2]|0[1-9])-(3[01]|0[1-9]|[12][0-9])T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?(Z)?$/;

    constructor() {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        return next.handle(req).pipe(tap((event: HttpEvent<any>) => {
            if (event instanceof HttpResponse) {
                event = event.clone({body: this.modifyBody(event.body)});
            }
            return event;
        }));

    }

    private modifyBody(body: any) {
        return this.deserializeDates(body);
    }

    private deserializeDates(obj) {
        if ((!(obj instanceof Object)) || (isString(obj))) {
            return obj;
        }

        for (const key of Object.keys(obj)) {
            const value = obj[key];
            let date;

            if (isString(value) &&  (this.DATE_TIME_TIMEZONE_REGEXP.test(value))) {
                date = new Date(value);
                // Check if the date parsing is successful
                if (isNaN(date.getTime())) {
                    return;
                }
                obj[key] = date;
            }
            this.deserializeDates(value);
        }

        return obj;
    }
}

Answer 2

My approach involves utilizing an interceptor for data transformation. While I plan to automate the generation of models and API resources from documentation in the future, I'm currently employing the following workaround:

export class ModelBinderInterceptor implements HttpInterceptor {

    // Regular expression for ISO 8601 Date.
    DATE_TIME_TIMEZONE_REGEXP =
    /^(-?(?:[1-9][0-9]*)?[0-9]{4})-(1[0-2]|0[1-9])-(3[01]|0[1-9]|[12][0-9])T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?(Z)?$/;

    constructor() {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        return next.handle(req).pipe(tap((event: HttpEvent<any>) => {
            if (event instanceof HttpResponse) {
                event = event.clone({body: this.modifyBody(event.body)});
            }
            return event;
        }));

    }

    private modifyBody(body: any) {
        return this.deserializeDates(body);
    }

    private deserializeDates(obj) {
        if ((!(obj instanceof Object)) || (isString(obj))) {
            return obj;
        }

        for (const key of Object.keys(obj)) {
            const value = obj[key];
            let date;

            if (isString(value) &&  (this.DATE_TIME_TIMEZONE_REGEXP.test(value))) {
                date = new Date(value);
                // Check if the date parsing is successful
                if (isNaN(date.getTime())) {
                    return;
                }
                obj[key] = date;
            }
            this.deserializeDates(value);
        }

        return obj;
    }
}

Angular automatically interprets strings as dates

Answer №1

Similar questions

Unit Testing AngularJS Configuration in TypeScript with Jasmine

Typescript can represent both optional and required generic union types

Accessing the personal data fields of a MongoDB object

Ways to manage multiple Observables

Displaying sorted objects from Angular serviceIn Angular 8, let's retrieve an object

What is the best way to view real-time updates on an Angular project?

Ways to verify if JSON.parse fails or yields a falsy outcome

Creating Reactive Form Validators in Angular 5: Implementing a Custom Validator to Compare Two Form Controls

Conceal Columns in DevExtreme with Angular2 EditMode

The JSON data does not meet the requirements set by the JSON Schema and

Is it possible to send all API requests through the server side in an Angular Universal application?

Having trouble making ngMouseEnter (and other similar commands) function correctly

How to use jQuery to dynamically generate a JSON object within a loop

Displaying the count of items outside the Angular 2 ngFor loop

Typescript and the way it handles responses from REST APIs

Converting information from JSON files (using tweepy) into a pandas data table

What is the best way to deactivate select option(s) based on the JSON data retrieved through AJAX?

Encountering a "Duplicate identifier error" when transitioning TypeScript code to JavaScript

How to Ensure that the Hidden Value of Select Statement in Angular is Always Displayed as Text

What's the best way to maintain the return type of a function as Promise<MyObject[]> when using forEach method?