Last active
October 31, 2024 17:32
-
-
Save martinobordin/39bb1fe3400a29c1078dec00ff76bba9 to your computer and use it in GitHub Desktop.
An Angular interceptor to parse string dates (ISO8601 format) from server response to JS Date Object. There are both RxJs 5 and RxJs 6 versions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Injectable } from '@angular/core'; | |
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse, HttpResponse } from '@angular/common/http'; | |
import { Observable } from 'rxjs/Observable'; | |
import 'rxjs/add/operator/do'; | |
@Injectable() | |
export class AngularDateHttpInterceptor implements HttpInterceptor { | |
// Migrated from AngularJS https://raw.githubusercontent.com/Ins87/angular-date-interceptor/master/src/angular-date-interceptor.js | |
iso8601 = /^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d(\.\d+)?(([+-]\d\d:\d\d)|Z)?$/; | |
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { | |
return next.handle(req).do((event: HttpEvent<any>) => { | |
if (event instanceof HttpResponse) { | |
const body = event.body; | |
this.convertToDate(body); | |
} | |
}, (err: any) => { | |
if (err instanceof HttpErrorResponse) { | |
if (err.status === 401) { | |
} | |
} | |
}); | |
} | |
convertToDate(body) { | |
if (body === null || body === undefined) { | |
return body; | |
} | |
if (typeof body !== 'object') { | |
return body; | |
} | |
for (const key of Object.keys(body)) { | |
const value = body[key]; | |
if (this.isIso8601(value)) { | |
body[key] = new Date(value); | |
} else if (typeof value === 'object') { | |
this.convertToDate(value); | |
} | |
} | |
} | |
isIso8601(value) { | |
if (value === null || value === undefined) { | |
return false; | |
} | |
return this.iso8601.test(value); | |
} | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
HttpRequest, | |
HttpHandler, | |
HttpEvent, | |
HttpInterceptor, | |
HttpErrorResponse, | |
HttpResponse | |
} from '@angular/common/http'; | |
import { Observable } from 'rxjs'; | |
import { tap } from 'rxjs/operators'; | |
export class AngularDateHttpInterceptor implements HttpInterceptor { | |
// Migrated from AngularJS https://raw.githubusercontent.com/Ins87/angular-date-interceptor/master/src/angular-date-interceptor.js | |
iso8601 = /^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d(\.\d+)?(([+-]\d\d:\d\d)|Z)?$/; | |
public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { | |
return next.handle(req).pipe( | |
tap((event: HttpEvent<any>) => { | |
if (event instanceof HttpResponse) { | |
const body = event.body; | |
this.convertToDate(body); | |
} | |
}, (err: any) => { | |
if (err instanceof HttpErrorResponse) { | |
if (err.status === 401) { | |
} | |
} | |
}), | |
); | |
} | |
convertToDate(body) { | |
if (body === null || body === undefined) { | |
return body; | |
} | |
if (typeof body !== 'object') { | |
return body; | |
} | |
for (const key of Object.keys(body)) { | |
const value = body[key]; | |
if (this.isIso8601(value)) { | |
body[key] = new Date(value); | |
} else if (typeof value === 'object') { | |
this.convertToDate(value); | |
} | |
} | |
} | |
isIso8601(value) { | |
if (value === null || value === undefined) { | |
return false; | |
} | |
return this.iso8601.test(value); | |
} | |
} |
For those, like me, who are using Java backends, there's one thing to be aware: the regex used works with LocalDateTime but if any DTO uses LocalDate, those fields won't be converted. I added another regex in order for them to be intercepted aswell.
Glad I found your code but I have one issue on my end. I'm using SpringBoot in the middle tier. How do I have my web service send a ISO8601 format string date in the JSON output? Right now its coming across as a number. I do want keep the field in the pojo as a java.util.Date class.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I have refactored by making it "type-safe", useful for those using strict typescript mode
Here is the code: https://gist.github.com/aml360/7e8efc275b0adb46bd5bb1b555b42467