Angular Date From Web API Response

user_1730723 0
Viewed 2475

I am developing an Angular (4.1.2) web application along with a corresponding ASP.Net Core (1.1) Web API.

I have an Angular service which makes an http request for data to my web API and the dates in the objects returned from the Angular service are not of type Date.

In my scenario my web application is getting Tasks from my SQL database and each Task includes a start and finish DateTime. My TasksController uses AutoMapper to map each Task to a TaskViewModel object and my TaskViewModel has a start and finish property which is of type DateTime.

If I put a break-point in my TasksController and examine the TaskViewModel objects to be returned, following the request, the start and finish properties are of type DateTime and as such the day, month, hour etc are all fine.

In Angular I have a task-api.service.ts file which includes the following code:

public getTasks(): Observable<Task[]> {
    let tasksArray: Observable<Task[]> = this.http.get("/api/tasks").map((response: Response) => {
        return <Task[]>response.json();
    }).catch(this.handleError);

    tasksArray.forEach(item => {
        console.log("Start: " +
            item.map(task => {

                if (task.start instanceof Date) {
                    console.log(task.start + " is date.");
                } else {
                    console.log(task.start + " is not date.");
                }

            }));
    });

    return tasksArray;
}

When I console.log() the start and finish date they appear like 2017-01-01T1 0:00:00. I tested the dates to check them.

My Angular Task class is defined like this:

export class Task {

private _children: Task[];

get children(): Task[] {
    //console.log("Getting children");
    return this._children;
};
set children(value: Task[]) {
    //console.log("Setting children");
    this._children = value;
};

constructor(
    public id: string,
    public scheduleId: string,
    public description: string,
    public taskTypeId: number,
    public taskType: string,
    public locationId?: number,
    public start?: Date,
    public finish?: Date,
    public duration?: number, // milliseconds
    public parentId?: string,
    public dependentTaskId?: string,
    public label?: string,
    children?: Task[])
    {
        if (children != null)
        {
            this.children = children;
        };
    }
};

How do I ensure that the start and finish dates in my Typescript objects are of type Date please?

angular2-observables angular datetime
1 Answers

Have you tried dateReviver?

public getTasks(): Observable<Task[]> {
    let tasksArray: Observable<Task[]> = this.http.get("/api/tasks")
                .map((response: Response) => {
                        return <Task[]>JSON.parse(response, dateReviver);
                }).catch(this.handleError);
}

function dateReviver(key, value) {  
    var a;  
    if (typeof value === 'string') {  
        a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);  
        if (a) {  
            return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],  
                        +a[5], +a[6]));  
            }  
    }  
   return value;
};

NOTE: Careful with date time kind. UTC or Local.

Reference:

https://docs.microsoft.com/en-us/scripting/javascript/reference/json-parse-function-javascript

http://james.newtonking.com/archive/2009/04/12/native-json-in-ie8-firefox-3-5-plus-json-net

user_74880220
Related