Angular 4.4 Date deserialization from REST-Service

Question

I am using Angular 4's new HttpModule to retrieve data from a REST-Service. The problem is, that the data contains a Date typed property. I've seen this thread but when I try the solution suggested in the thread, I get the following error: res.json is not a function

Here is my code:

getMarkets(): Observable<Christmasmarket[]> {
    let markets: Christmasmarket[];
    return this.http.get(this.apiUrl).map(this.extractData);

  }

  private extractData(res: Response) {

    let body = res.json().data;
    console.log(body);
    body.forEach((d) => {
      d.start = new Date(d.start)
      d.end = new Date(d.end);
    });
    return body.data || {};
  }

And here is the data from the service:

[
  {
    "id": 1,
    "name": "mein markt1",
    "start": "2017-11-14T23:00:47.838+0000",
    "end": "2017-12-14T23:00:47.838+0000",
    "postalCode": "1100",
    "city": "wien",
    "address": "test",
    "rating": 4.56,
    "ratingPrice": 1.2,
    "numberOfRatings": 10,
    "latLng": {
      "latitude": 48.208982,
      "longitude": 16.373213
    },
    "openingHours": [
      {
        "open": true,
        "start": 600,
        "end": 1200,
        "dayOfWeek": 0
      },
      {
        "open": true,
        "start": 660,
        "end": 1200,
        "dayOfWeek": 1
      },
      {
        "open": true,
        "start": 690,
        "end": 1200,
        "dayOfWeek": 2
      },
      {
        "open": true,
        "start": 600,
        "end": 1200,
        "dayOfWeek": 3
      },
      {
        "open": true,
        "start": 600,
        "end": 1200,
        "dayOfWeek": 4
      },
      {
        "open": true,
        "start": 600,
        "end": 1200,
        "dayOfWeek": 5
      },
      {
        "open": true,
        "start": 600,
        "end": 1200,
        "dayOfWeek": 6
      }
    ],
    "extraordinaryOpeningHours": [

    ]
  }
]

score 3 · Accepted Answer · answered Oct 21 '17 at 09:29

3

You are probably using the new HttpClientModule, rather then the old HttpModule. With HttpClient, the deserialization from JSON is done automatically, so there is no response.json() method.

More about it in angular docs: https://angular.io/guide/http

Also note then with HttpClient, you can specify interface of the response, so it will automatically map it for you:

interface ItemsResponse {
  results: string[];
}

http.get<ItemsResponse>('/api/items').subscribe(data => {
  // data is now an instance of type ItemsResponse, so you can do this:
  this.results = data.results;
});

This should work also with Date type i guess.

answered Oct 21 '17 at 09:29

Martin Adámek

16,771
5
45
64

Yes thank you, I did not quite get it that the extractData now takes my type as a parameter as well. Thanks! – Patrick Zinner Oct 21 '17 at 09:55
What you actually missed is that you shouldn't need an extractData method at all - the HttpClient does that for you. – GreyBeardedGeek Oct 21 '17 at 12:09
3

@GreyBeadedGekk I tried it without the extractData function and no, it does not work. Somehow it does not map it as a date. When I'm calling start.getTime() I'm getting an error that there is not such a function - because it is a String. – Patrick Zinner Oct 27 '17 at 05:18

Angular 4.4 Date deserialization from REST-Service

1 Answers1