Angular 5, HttpClient, Subscribe doesn't map properly

Question

From an api, get some datas into a JSON array, as :

[{"id":19,"date":{"date":"2017-09-10 10:58:40.000000","timezone_type":3,"timezone":"Europe/Paris"},"user":{"nom":"castro","prenom":"diana","mail":"diana.castro@laposte.net","telephone":"0645507509","adresse":"21 rue durand","codePostal":"31200","ville":"Quartier Borderouge","prixDeVente":"1 250 000","commentaire":""},"feature":{"type":"Terrain + Maison","tailleParcelle":"2000 à 2500m²","longueurFacade":"10 à 12m","estimationVente":"1 000 000 à 1 250 000€","isVendeur":"Non","voisinVendeur":"Ne sait pas","alreadyMeetPromoteur":"Non","howManyProposition":"Aucune","alreadyPromise":"Non","saleDelay":"1 à 2 ans"}}]

Make an interface to handle the response :

import { QuotationInterface } from './quotationinterface';

export interface QuotationsResponse {
  results: Array<QuotationInterface>;
}

QuotationInterface is the following :

import { DateInterface } from './dateinterface';
import { UserInterface } from './userinterface';
import { FeatureInterface } from './featureinterface';

export interface QuotationInterface {

  id: number;

  date: DateInterface;

  user: UserInterface;

  feature: FeatureInterface;
}

A service that load the datas :

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/toPromise';

import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';

import { Constants } from './../constants/constants';
import { QuotationsResponse } from './../interfaces/quotationsresponse';

@Injectable()
export class WebapiService {

  constructor(private http: HttpClient) { }

  public getQuotations(): Observable<QuotationsResponse> {
    return this.http.get<QuotationsResponse>(Constants._WEB_API_ROOT + 
   'quotations');
  }

}

And finally, a method that get datas :

  public getQuotations(): Promise<QuotationCollection> {
  return new Promise((resolve) => {
    this.webApi.getQuotations().subscribe((quotations) => {
      console.log('Quotations : ' + JSON.stringify(quotations));
      this._quotations = quotations;
      console.log('Quotations : ' + typeof this._quotations);
      // Alimente la collection elle-même
      for (let quotation of this._quotations.results) {
        console.log('quotation : ' + JSON.stringify(quotation));
        this.hydrate(quotation.id, quotation);
      }
      resolve(this);
    });
  });

  }

Concrete types (mean Date) are made as follow :

import { DateInterface } from './../interfaces/dateinterface';
import { DeserializableInterface } from 
'./../interfaces/deserializableinterface';

import * as moment from 'moment';

export class Date implements DateInterface, DeserializableInterface<Date> {
  date: string;
  timezone_type?: number;
  timezone?: string;

  public getDate(): moment.Moment {
    return moment(this.date);
  }

  public deserialize(input: any): Date {
    console.log('Deserialisation : ' + JSON.stringify(input));
    Object.assign(this, input);
    return this;
  }
}

So... When the app run :

api is correctly called, datas are returned, but if i console "quotations", got "Object" when i expect "QuotationsResponse", internal Object (User, Date, Feature) are Object too, so, the "getDate()" method is unknown...

What i'm doing wrong ?

Thx

hydrate is just a method that feed a Map object : this.collection.set(id, quotation) — Jean-Luc Aubert, Apr 14 '18 at 17:51
`` is just a hint, it doesn't cause any casting or conversion. It *can't*, because TS doesn't exist at runtime. — jonrsharpe, Apr 14 '18 at 17:54
You can't map JSON object with you any custom class. If you want to do so you will have to create new Object of that class while setting data. — Anshuman Jaiswal, Apr 14 '18 at 17:55
Possible duplicate of [No methods in http response object](https://stackoverflow.com/questions/48102824/no-methods-in-http-response-object) — jonrsharpe, Apr 14 '18 at 17:55
So... It means that i have to map into objects in the getQuotations() method ? — Jean-Luc Aubert, Apr 14 '18 at 17:58

score 0 · Accepted Answer · answered Apr 14 '18 at 17:59

Typecasting can't be done in response, you will have to do it as:

public getQuotations(): Promise<QuotationCollection> {
  return new Promise((resolve) => {
    this.webApi.getQuotations().subscribe((quotations) => {
      console.log('Quotations : ' + JSON.stringify(quotations));
      this._quotations = quotations;

      console.log('Quotations : ' + typeof this._quotations);
      // Alimente la collection elle-même
      for (let quotation of this._quotations.results) {
        // =========== HERE =============== //
        quotation.date = Object.assign(new Date(), this.quotation.date);
        console.log('quotation : ' + JSON.stringify(quotation));
        this.hydrate(quotation.id, quotation);
      }
      resolve(this);
    });
  });
}

I would also suggest to rename Date class so that anyone doesn't get confused with JS' Date class

Angular 5, HttpClient, Subscribe doesn't map properly

1 Answers1