Wie JSON-Objekte in TS-Klasse umgewandelt werden

Question

Ich versuche, Django Antwort auf Angulare User Array zu transformieren. Es gibt mehrere Gründe, z. B. verschiedene Variablennamen (first_name vs firstName) und einige Logik innerhalb Angular User Konstruktor.

Einfach Django User => Angular User

Beispiel für Serverantwort:

[ 
    {"id":2,"email":"test1@test.com","first_name":"Name 1","client":{"id":1}}}, 
    {"id":3,"email":"test2@test.com","first_name":"Name 2","client":{"id":2}}} 
] 

Was ich will, ist in dieses Format zu transformieren:

export class User { 
    // contructor that transforms 
    id: number; 
    email: string; 
    firstName: string; 
    isClient: boolean = false; 
} 

Ich habe dies zur Zeit " gelöst ", aber ich frage mich, ob es dafür eine bessere Lösung gibt. Innen something.service.ts

public getClients(): Observable<User[]> { 
    return this.http.get(this.getClientsUrl) 
    .map(r => r.json() || []).map(x => x.map(y => new User(y))); 
} 

Wenn ich eine bessere Lösung sagen, während dies funktioniert, es sieht nicht sehr gut lesbar. Kein Problem, wenn Sie dies einmal tun, aber wenn Sie viele Anfragen haben, denken Sie über eine bessere Lösung nach (eine Methode, um damit umzugehen?). Was wäre ein besserer Weg? So etwas wie

return this.http.get(this.getClientsUrl) 
.map(transformResponse); 

Answer 1

Eine Lösung, die ich fand (mit etwas Hilfe der Idee von Roman C) ist exten Service-Klasse. Diese Lösung funktioniert sowohl für Array- als auch für Objektantworten.

export class ServiceUtils { 
    protected transformResponse(response: Response, myClass: any) { 
     let body = response.json(); 

     if (body.constructor === Array) { 
      return body.map(element => new myClass(element)) || [] 
     } 

     return new myClass(body) || new myClass(); 
    } 
} 

Und mit wie folgt aus:

export class SomeService extends ServiceUtils { 

    constructor(private http: Http) { 
     super(); // Unfortunate side effect 
    } 

    public getClients(): Observable<User[]> { 
     return this.http.get(this.getClientsUrl) 
     .map(response => this.transformResponse(response, User)); 
    } 
} 

---

--- EDIT ---

Eine immer bessere Lösung (ohne Service-Verlängerung):

import { Response } from '@angular/http'; 


export class ServiceUtils { 
    public static transformResponse(response: Response, myClass: any) { 
     let body = response.json(); 

     if (body.constructor === Array) { 
      return body.map(element => new myClass(element)) || [] 
     } 

     return new myClass(body) || new myClass(); 
    } 
} 

Und es verwenden:

public getClients(): Observable<User[]> { 
    return this.http.get(this.getClientsUrl) 
    .map(r => ServiceUtils.transformResponse(r, User)); 
} 

Answer 2

mit sollte es so etwas wie

sein

return this.http.get(this.getClientsUrl) 
.map(r => this.transformResponse(r)); 

Answer 3

Eine TS-Schnittstelle sieht wie folgt aus:

interface SquareConfig { 
    color: string; 
    width?: number; 
    enabled: boolean; 
} 

Haben Sie ein bestimmtes Objekt in eine TS-Schnittstelle umwandeln möchten (wirklich) oder willst du das Antwortobjekt lesbarer machen? Das ist völlig anders.
Weil das "Was ich will" oben Beispiel keine TS-Schnittstelle ist.

Answer 4

Wenn Sie Ihren Code anders formatiert haben und klarere Namen verwenden, wäre er z.

public getClients(): Observable<User[]> { 
    return this.http.get(this.getClientsUrl) 
     .map(response => response.json() || []) 
     .map(users => users.map(user => new User(user))); 
} 

Ich habe ein codepen example geschaffen, die die Server-Antwort korrekt formatiert abmeldet.

einem Ihrer Kommentare von anderen Antwort Lesen:

Something like this, but I would like to have transformResponse implemented only once, which means it should accept class as a parameter as well.

Ich denke, dass Sie TypeScript generics wollen, die wie folgt aussehen:

public getClients<T>(type: T): Observable<T[]> { 
    return this.http.get(this.getClientsUrl) 
     .map(response => response.json() || []) 
     .map(clients => clients.map(client => new type(user))); 
} 

Und wenn man wollte Roman C Ansatz kombinieren: