Angular Http Client Antwort in Klassen-Objekt umwandeln

Beim Abfragen eines REST-Endpunktes mit dem Angular Http Client liefert dieser bei entsprechendem Aufruf bereits typisierte Antworten. D.h. hat man z.B. ein Interface für Mitarbeiter definiert kann man dem Http Client sagen dass die zurückgelieferten JSON-Daten diesem Interface entsprechen.

Das hat den Vorteil, dass man einfacher auf die einzelnen Eigenschaften zugreifen kann, indem man z.B. mitarbeiter.nachname anstatt antwort[’nachname‘] verwendet. IDE´s können den Namen gleich vorschlagen bzw. man bekommt einen Fehler, wenn es die Eigenschaft nicht gibt.

Beispiel:

export interface Mitarbeiter {
   vorname: string;
   nachname: string;
}Code-Sprache: CSS (css)

getMitarbeiter(): Observable<Mitarbeiter> { 
   return this.http.get<Mitarbeiter>(this.apiUrlEndpoint);
}Code-Sprache: JavaScript (javascript)

Oft bietet es sich aber an, statt des Interfaces eine Klasse zu verwenden, um darin gleich Methoden z.B. zur Formatierung unterzubringen. Z.B. könnte man im Mitarbeiter folgende Methode ergänzen:

export class Mitarbeiter {
   vorname: string;
   nachname: string;
   
   get name(): string {
      return this.vorname + ' ' + this.nachname;
   }
}Code-Sprache: JavaScript (javascript)

Dies wird jedoch nicht funktionieren, da der Http Client nicht automatisch eine Objekt der Klasse erstellt. Nun könnte man die Antwort selbst umwandeln, indem man ein neues Objekt der Klasse Mitarbeiter erstellt und händisch die einzelnen Properties setzt.

Einfach geht es aber mit der Bibliothek ‚class-transformer‘ (https://github.com/typestack/class-transformer). Diese bietet eine Funktion „plainToClass“ welche genau diese Aufgabe automatisiert übernimmt.

Somit wäre nur noch der Aufruf des Http-Client entsprechend zu ändern:

getMitarbeiter(): Observable<Mitarbeiter> { 
   return this.http.get<Mitarbeiter>(this.apiUrlEndpoint).pipe(map(obj => plainToClass(Mitarbeiter, obj)));
}Code-Sprache: JavaScript (javascript)

Ein Aufruf der Funktion könnte folgendermaßen aussehen:

const mitarbeiter = await this.getMitarbeiter().toPromise();
console.log(mitarbeiter.name);Code-Sprache: JavaScript (javascript)

Wie man sieht hat man dann ein vollständiges Klassen-Objekt und kann auf dessen Methoden zugreifen.