Introduction
The below is a summary of previous post about JavaScript Date Object and JSON Date.
- JSON is common communication format between server side and client side
- JavaScript Date Object is Time zone and Locale Dependent
- ISO 8601 Date Format is a general agreement for JSON Date representation
- JavaScript do not know JSON date type. Conversion between JSON Date String and JavaScript Date Object is required.
Seamless Integration Approaches
In Angular Application, what could be done in order to make the seamless integration of JavaScript Date Object, JSON and UI Components?
There would be two important parts for the seamless integration.
- Communication between Client Side and Server Side
- Datepicker Handling
Communication between Client Side and Server Side
In Angular Application, it would provide HttpClientModule for simplifying HTTP Communication between client side and server side.
this.httpClient.get<DataModel>("/api/getData").subscribe(
(data: DataModel) => {
console.log(data);
}
);
Although, the data model (Interface) is defined above, JSON does not have date object. The date object would be presented as Data String in ISO format. The Data String would simply assign to date even though it is defined as Date in Interface in TypeScript. Note that the interface would be compiled to nothing and it is only for tying checking in typescript context.
interface DataModel {
data1: string;
data2: string;
data3: string
date1: Date;
date2: Date;
date3: Date
}
There would be two approaches to convert
- Http Client Pipe
- Angular Http Interceptor
Http Client Pipe
Http Client would return Observable for various provided method. The map operator in pipe could be used to convert date string to date object.
this.httpClient.get<DataModel>("/api/getData")
.pipe(
map((data)=>{
data.date1 = new Date(data.date1);
data.date2 = new Date(data.date2);
data.date3 = new Date(data.date3);
return data;
})
).subscribe(
(data: DataModel) => {
console.log(data);
}
);
Angular Http Interceptor
As the date string is in ISO 8601, we want to have a generic way to do all the conversion. A custom HttpInterceptor would be added to Angular Application for intercepting request and response.
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
export class JsonDateInterceptor implements HttpInterceptor {
private _isoDateFormat = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d*)?Z$/;
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req).pipe(map( (val: HttpEvent<any>) => {
if (val instanceof HttpResponse){
const body = val.body;
this.convert(body);
}
return val;
}));
}
isIsoDateString(value: any): boolean {
if (value === null || value === undefined) {
return false;
}
if (typeof value === 'string'){
return this._isoDateFormat.test(value);
} return false;
}
convert(body: any){
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.isIsoDateString(value)) {
body[key] = new Date(value);
} else if (typeof value === 'object') {
this.convert(value);
}
}
}
}
this._httpClient.post<Value>("/api/posts", this.value)
.subscribe((val: Value) => {
console.log(val.date1);
});
Angular UI Datepicker
The Date Object in Browser is timezone and locale dependent. Sometimes, we would like to have custom presentation of date which in defined in the web application. We do not want to care about the browser setting.
TO BE CONTINUED
https://medium.com/self-learning/ngx-datepicker-utc-datepicker-design-77e33789e9d7
Top comments (0)