Struggling to convert string dates to JavaScript dates

Question

I'm somewhat new to RxJs and Kendo grid for Angular. I'm trying to convert an array of objects from a web service that contain date properties as strings. This way the grid should sort/filter property as real dates instead of strings.

In typescript I've tried the following but I'm stumped on how to convert the date properties to JavaScript dates. What should the syntax look like that iterates through the array and sets the three dates to JavaScript dates in each object?

// interface representing a row of grid data

export interface RowItem {
    firstName: string;
    lastName: string;
    dateOfBirth: Date;
    startDate: Date;
    endDate: Date
}

//fetch method in the service - generic

private fetch(action: string = '', data?:any):Observable<any[]> {
    return this.http.get(URL_TO_WEBSERVICE)
   //parse the return to set the dates as JavaScript dates in the array of objects
       .pipe(map(res => <any[]>res));
}

//I've tried this version of the fetch() as well thinking it would work automatically but it doesn't

private fetch(action: string = '', data?:any):Observable<RowItem[]>{
    return this.http
       .get<RowItem[]>(URL_TO_WEBSERVICE)
       //parse the return to set the dates as JavaScript dates in the array of objects
       .pipe(map(res => <RowItem[]>res));
}

Answer 1

Assuming you have dates as ISO string you can set them in the map :

private fetch(action: string = '', data?:any): Observable<RowItem[]> {
    return this.http
        .get<RowItem[]>(URL_TO_WEBSERVICE)
        .pipe(
            map(rowItems => {
                rowItems.forEach(item => {
                    item.dateOfBirth = new Date(item.dateOfBirth);
                    item.startDate = new Date(item.startDate);
                    item.endDate = new Date(item.endDate);
                });
                return rowItems;
            })
        );
}