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 stackoverflow.com/questions/4511705/… — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 10, 2016 at 13:28

Muhammad Dyas Yaskur · Accepted Answer · 2023-08-22 00:44:22Z

28

@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.

edited Aug 22, 2023 at 0:44

Muhammad Dyas Yaskur

8,35811 gold badges62 silver badges91 bronze badges

answered Mar 10, 2016 at 18:03

Amid

22.5k6 gold badges63 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Over a year ago

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.

Community · Accepted Answer · 2017-05-23 11:33:26Z

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, 2017 at 11:33

CommunityBot

11 silver badge

answered Mar 10, 2016 at 13:25

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

2 Comments

Vladimir Nani Over a year ago

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.

Günter Zöchbauer Over a year ago

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.

lduburas · Accepted Answer · 2020-01-30 22:22:03Z

0

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 } ] }

answered Jan 30, 2020 at 22:22

lduburas

1

Comments

Dharman · Accepted Answer · 2020-08-11 14:48:52Z

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, 2020 at 14:48

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Aug 11, 2020 at 14:43

Yusuff Sodiq

9652 gold badges13 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to get Date object from json Response in typescript

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related