The object's date field is being assigned a data type of Long

Question

The object's date field is being assigned a data type of Long

When I send a LocalDateTime field as Long type from Spring Boot, it is not deserialized in Angular and remains as long instead of being converted to Date.

Is there a universal deserialization setting for this in Angular? I am looking for a solution without having to manually convert the field using new Date(field_name).

JSON data sent from Spring Boot

..."field_1":1666256336000...

Angular model

export class Object1 {
        field_1: Date;
}

Angular Service Method

method_name(){
    return this.getHttp().get<Object1>(..urls..);
}

We call the method

this.service.method_name().pipe().subscribe((data: Object1) => {
            console.log(data.field_1)
        });

The output appears like this

1666256336000

angular typescript spring-boot

Answer 1

Answer №1

To effectively handle incoming data and convert a Long timestamp into a Date object in Angular, you would require the implementation of an Interceptor. This Interceptor would intercept the incoming data, extract the Long timestamp representing milliseconds, and transform it into a Date object.

Within your Interceptor, you would utilize the new Date(value) constructor of the JavaScript Date Object, which is capable of processing timestamps in milliseconds.

If you were to create such an Interceptor, it might resemble the following code snippet:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpEvent, HttpResponse, HttpRequest, HttpHandler } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class DateFormatInterceptor implements HttpInterceptor {
  intercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(httpRequest).pipe(
       map((response: HttpResponse<any>) => {
          let formatted = response.clone();
          for(let key in formatted){
             if(key == "date1" || key == "date2" || key == "date3"){
                formatted[key] = new Date(formatted[key]);
             }
          }
          return formatted;
       }
     );
  }
}

Remember to provide this Interceptor within your application as well.

Answer 2

To effectively handle incoming data and convert a Long timestamp into a Date object in Angular, you would require the implementation of an Interceptor. This Interceptor would intercept the incoming data, extract the Long timestamp representing milliseconds, and transform it into a Date object.

Within your Interceptor, you would utilize the new Date(value) constructor of the JavaScript Date Object, which is capable of processing timestamps in milliseconds.

If you were to create such an Interceptor, it might resemble the following code snippet:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpEvent, HttpResponse, HttpRequest, HttpHandler } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class DateFormatInterceptor implements HttpInterceptor {
  intercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(httpRequest).pipe(
       map((response: HttpResponse<any>) => {
          let formatted = response.clone();
          for(let key in formatted){
             if(key == "date1" || key == "date2" || key == "date3"){
                formatted[key] = new Date(formatted[key]);
             }
          }
          return formatted;
       }
     );
  }
}

Remember to provide this Interceptor within your application as well.

The object's date field is being assigned a data type of Long

Answer №1

Similar questions

Altering the properties of a specified element within TestBed using the overrideComponent method

At what point is it appropriate for a class to incorporate an interface?

Getting access to a JavaScript class from TypeScript and initializing it

Error in Typescript: TS7006 - The parameter 'xxx' is assumed to have a type of 'any' without explicit declaration

Issue: Unhandled promise rejection: SecurityError: To use screen.orientation.lock(), the page must be in fullscreen mode

Error encountered during the http.put() method due to invalid request payload

Using Angular's mat-sidenav component to create a navigation menu that

Improving the readability of Angular and RxJS code

Is it possible for me to locally install @angular/[email protected] without needing to globally downgrade the latest @angular/[email protected] version?

Achieve a main-menu container with a full width dropdown using Bootstrap 4

What type of module from commonjs is typically brought into a typescript document?

The File Filter feature of Angular's ng2-file-upload is not functioning correctly for PNG files in the Internet Explorer

Can you point out the distinction?

Typescript's return type can be autocompleted based on the input object provided

How to easily upload zip files in Angular 8

Ways to verify the data type of a column in a table

Encountering issues with addMethod functionality in TypeScript with the latest version of Yup

What is the method by which the Material-UI Button component determines the properties for the component that is passed to the `component` prop

Eslint highlighting the initial function declaration within a Vue script

Arranging an array of objects in typescript with elements implicitly having an undefined type