How to get Date object from json Response in typescript

Question

Here is my json:

{
  "data": [
    {
      "comment": "3541",
      "datetime": "2016-01-01"
    }
  ]
}

Here is model:

export class Job {
    constructor(comment:string, datetime:Date) {
        this.comment = comment;
        this.datetime = datetime;
    }

    comment:string;
    datetime:Date;
}

Query:

getJobs() {
        return this._http.get(jobsUrl)
            .map((response:Response) => <Job[]>response.json().data)
}

Problem is that after casting to Job[] i expect datetimeproperty to be Date but it is string. Shouldn't it cast to Date object? What am i missing here?

Seems to be a dup of http://stackoverflow.com/questions/4511705/how-to-parse-json-to-receive-a-date-object-in-javascript — Günter Zöchbauer, Mar 10 '16 at 13:28

score 26 · Accepted Answer · edited Aug 22 '23 at 00:44

@Gunter is absolutely correct. The only thing I would like to add is actually how to deserialize json object keeping its date properties as dates and not strings (from the referenced post its not that easy to see this approach).

Here is my attempt:

export class Helper
{
    public static Deserialize(data: string): any
    {
        return JSON.parse(data, Helper.ReviveDateTime);
    }

    private static ReviveDateTime(key: any, value: any): any 
    {
        if (typeof value === 'string')
        {
            let a = /\/Date\((\d*)\)\//.exec(value);
            if (a)
            {
                return new Date(+a[1]);
            }
        }
 
        return value;
    }
}

You can see this approach for example here: JSON.parse Function in the dateReviver example.

In my case, as I was simply receiving a string like `2018-12-06T15:32:43.590`, my function just assigns `new Date(value)` to a variable and then checks its status before returning. — Andrew, Dec 06 '18 at 15:42

score 9 · Answer 2 · edited May 23 '17 at 11:33

9

There is no way to know for TS/JS that this value is a date. It's a string and treated as such. Other data types are distinguishable but JSON doesn't provide any special support for date. You need to convert it manually.

See for example this discussion how to transport and convert a date using JSON How do I format a Microsoft JSON date?

edited May 23 '17 at 11:33

Community

1
1

answered Mar 10 '16 at 13:25

Günter Zöchbauer

623,577
216
2,003
1,567

4

Thats strange, isnt it? if ``Job`` object has ``datetime`` property as ``Date`` and im casting to Job, doesn't that mean that i want to cast all properties correspondingly. – Vladimir Nani Mar 10 '16 at 13:28
2

I don't know TS too well but I don't think you can cast a string to a date, you would need to convert it instead. At runtime it's quite meaningless that you cast to `Job` at all. – Günter Zöchbauer Mar 10 '16 at 13:29

score 0 · Answer 3 · answered Jan 30 '20 at 22:22

If usage of custom TypeScript transformer is possible, ts-transformer-dates could be used:

import { toDates } from 'ts-transformer-dates';

const value = {
  "data": [
    {
      "comment": "3541",
      "datetime": "2016-01-01"
    }
  ]
};

export class Job {
    constructor(comment:string, datetime:Date) {
        this.comment = comment;
        this.datetime = datetime;
    }

    comment:string;
    datetime:Date;
}

console.log(toDates<{data:Job[]}>(value));

Output:

{ data: [ { comment: '3541', datetime: 2016-01-01T00:00:00.000Z } ] }

score 0 · Answer 4 · edited Aug 11 '20 at 14:48

0

You can achieve it using 2 properties: a string property (say dateStr) for passing the date and a Date property (say dateVal) to hold the data object after conversion.

Then in your constructor, you can simply do something like dateVal = new Date(dateStr).

edited Aug 11 '20 at 14:48

Dharman

30,962
25
85
135

answered Aug 11 '20 at 14:43

Yusuff Sodiq

815
2
12
19

How to get Date object from json Response in typescript

4 Answers4

Linked

Related