angularjs - angular observerbar http-anrop mappa svar till interface

Jag har en funktion som anropar ett REST-API på detta sätt:

getProducts(category: string): Observable<IProduct[]> {
    let url = `/rest/getproducts?category=${category}`;
    return this._http.get<IProduct[]>(url);
  }

Svaret från tjänsten ser ut så här:

[
  {
    "ProductId": 1,
    "CategoryType": "XC",
    "Name": "Prod A"
  },
  {
    "ProductId": 2,
    "CategoryType": "XY",
    "Name": "Prod B"
  },
]

Min modell ser ut så här:

export interface IProduct {
    id: string;
    type: string;
    name: string;
}

Finns det ett sätt att kartlägga svaret till min modell på ett enkelt sätt? Bör jag använda map-funktionen? Jag vet att jag skulle kunna ändra modellen för att passa svaret, men jag skulle hellre vilja trycka in svaret i min modell (exemplet är förenklat).

Svar #1

Den enklaste lösningen skulle vara att använda ett gränssnitt som har formen av de faktiska data som kommer från servern. Mindre huvudvärk, ingen mappning, mindre underhåll.

Även om du vill göra viss kartläggning skulle det fortfarande vara en bra idé att ha ett gränssnitt för serverobjektet, så att kartläggning kan göras säkert:

interface IServerProduct {
    "ProductId": number;
    "CategoryType": string;
    "Name": string;
}

export interface IProduct {
    id: string;
    type: string;
    name: string;
}

getProducts(category: string): Observable<IProduct[]> {
    let url = `/rest/getproducts?category=${category}`;
    return this._http.get<IServerProduct[]>(url).pipe(
        map(o => o.map((sp): IProduct => ({ // IProduct specified here ensures we get excess property checks
            id: sp.ProductId + '', // number in server interface, map to string 
            name: sp.Name,
            type: sp.CategoryType,
            typeMisaken: sp.CategoryType, // error here
        })))
    );
}

Svar #2

Ditt gränssnitt bör se ut som nedan, om du inte vill göra några ändringar i koden kan du kolla det här json2ts

declare module namespace {
    export interface IProduct {
        ProductId: number;
        CategoryType: string;
        Name: string;
    }
}

annars kan du använda array.map-funktionen och generera din array själv.

Relaterade artiklar