Muster für den Umgang mit Zuordnung von API-Objekten zu UI-Modell-Objekten

Question

Ich wechsle um den neuen HttpClient in eckigen zu verwenden.

Die API am Aufruf gibt JSON-Daten in einem Format zurück. Ich möchte diese Daten nehmen und in eine Typoskriptmodellklasse umwandeln, die für die Benutzeroberfläche geeignet ist.

Die Art, wie ich dies zuvor getan habe, war mit der Kartenfunktion z.

Wo die Kartenfunktion das schwere Heben der Transformation der API-Antwort intro ein Modellobjekt z.

const mapFunction = 
      (response: Response) => { 
       const data = response.json(); 
       const contacts: Contact[] = []; 
       let i = 0; 
       for (const result of data.resourceResults) { 
        i = i + 1; 
        const contact: Contact = new Contact(); 
        contact.role = result.r 

Ich scheint dies recht umständlich, und ich bin im Grunde nach einer Möglichkeit, Objekte aus dem api Antworttyp zum ui Modelltyp zuordnen, ohne eine eigenen Map-Funktion für jede Anforderung zu verwenden.

Answer 1

Es gibt keine Möglichkeit, benutzerdefiniertes Mapping durchzuführen, ohne explizit anzugeben, was zugeordnet werden muss. Entweder geben Sie der Serverseite an, eine benutzerfreundliche Antwort zurückzugeben, oder Sie müssen die Zuordnung selbst auf der Clientseite durchführen.

Wenn Sie die Antwort auf der Client-Seite zuordnen möchten, können Sie auf Typoskript Klassen nutzen, und verwenden Sie seine constructor, um schnell die Elemente zu erzeugen Sie wollen:

export class Contact { 
    public name:string; 
    public roles:any; 
    constructor(name:string, roles: any) { 
     //specify your own constructor logic 
     this.name=name; 
     this.roles=roles 
    } 
} 

und jetzt können Sie in Ihrem mapFunction schreiben um die Antwort explizit in eine Liste von Contact s zu konvertieren. Außerdem können Sie Arrays verwenden .map() durch die Objekte zu durchlaufen, ohne eine for-Schleife zu schreiben:

public mapFunction = (response: Response) => { 
    const data = response.json(); 
    const resource = data.resourceResults; 
    //map it 
    return resource.map(result => new Contact(result.n, result.r)) 
} 

Umständliche oder nicht, ich denke, daß seine subjektiv. Aber definitiv können Sie Ihren Code eleganter schreiben.

Answer 2

Ich bin im Moment völlig angular, aber das sollte immer noch wegen Typoskript gelten. Entschuldigung für meinen pseudo-eckigen Code. Eine der einfachsten Möglichkeiten besteht darin, Ihre Objekte Schnittstellen zuzuordnen. Also wenn ich JSON-Antwort haben:

{ 
    Id: 1, 
    Name: "Bob", 
    Age: 21 
} 

Wegen Typoskript Ich kann einfach eine passende Schnittstelle erstellen:

export interface IPerson 
{ 
    Id: number, 
    Name: string, 
    Age: number 
} 

Und ich kann nur den Wert um die Schnittstelle passieren, ohne zu Karte mit Wert für Klassen.

return (this.httpClient.get(url, { headers: headers })) as IPerson; 

Zugegeben, wenn Sie den JSON erweitern müssen, ist dies nicht die richtige Lösung.