ASP.NET Core 7 Web API : date serialization for Angular form control

Question

In the Person class, Birthday is defined as DateTime.

public class Person
{
    public string Name { get; set; }
    public DateTime Birthday { get; set; }
}

In my controller, I have an endpoint as follows:

[HttpGet("personId")]
public async Task<ActionResult<Person>> GetPerson(int personId) 
{
    var person = new Person 
                     {
                         Name = "Joe Blow",
                         Birthday = DateTime.Now
                     };
  
    return Ok(person);
}

When I hit my endpoint via Postman, I get this:

{
    "name": "Joe Blow",
    "birthday": "2023-08-07T07:37:17"
}

Okay, awesome. DateTime get serialized into this format. I believe it's called ISO 8601 but it really doesn't matter to me.

What matters is when I put it into a Reactive Forms FormControl, it is seen as a Javascript Date, not a string.

If I first replace it as a JS Date, it works:

person.birthday = new Date(person.birthday);

But I really hate doing that. What am I missing here?

The really annoying part is that in my Angular code, I explicitly state that Person.birthday is a Date:

export class Person {
    name: string;
    birthday: Date;
}

So when I use the HTTP client to get a person:

this.httpClient.get<Person>(url).pipe(take(1)).subscribe(
  {
    next: (result: Person) => {
      console.log('Surpise: result.birthday is a string!');
    }
  }  
);

Does this answer your question? How to get Date object from json Response in typescript — wnvko
– wnvko, Commented Sep 21, 2023 at 4:40
This has is purely related to type script. There is no way TS will understand that the string representing the date coming from the http response is a date. Look at this here stackoverflow.com/questions/35917808/… — wnvko
– wnvko, Commented Sep 21, 2023 at 4:42

Denis Michealk · Accepted Answer · 2023-09-21 10:11:08Z

1

You didn't miss anything: A Date from an API always comes back as a string (I think that can not come back as a JavaScript object).

Personally I solved it, By making a simple "map" in my service. In this way, your angular component works always on a Date JavaScript object

getData()
{
    return this.getUrl(...).pipe(map(res:any[])=>{
       res.forEach(x=>{
          x.propertyDate=new Date(x.propertyDate)
       })
       return res;
    }
    )
}

getDataId(int id)
{
    return this.getUrl(...).pipe(map(res:any)=>{
      res.propertyDate=new Date(res.propertyDate)
      return res;
    })
}

saveData(data:any)
{
     const dataSend:any={...data} //make a copy to not transform the origina data
     dataSend.propertyDate=data.propertyDate.ToString()
     return http.post(....,dataSend)
}

edited Sep 21, 2023 at 10:11

Denis Michealk

1,9862 gold badges19 silver badges23 bronze badges

answered Sep 21, 2023 at 6:40

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

3 Comments

FunkMonkey33 Over a year ago

That is essentially what I am doing, although I'm not super happy with it. Too many different dates in too many different model classes. Now if there were some way to do this generically, using some type of typescript reflection, so that any property marked as a Date would get this treatment, that would be pretty cool.

Eliseo Over a year ago

@FunkMonkey33, please, if you find another way, tell me (I'm not very happy to do it too)

Eliseo Over a year ago

@FunkMonkey33, this link I just googled it's related to the question (but it's really not a great advance)

Collectives™ on Stack Overflow

ASP.NET Core 7 Web API : date serialization for Angular form control

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related