javascript - Korrekt kartläggning till gränssnitt när man hämtar data från en given URL

Jag är ny på Angular och jag försöker mappa den returnerade json till mitt gränssnitt men misslyckades.

Här är länken till koden jag har.

  • Stackblitz
  • Json URL

Svar #1

Du behöver inte använda map eftersom ditt svar är ett objekt och som jag ser vill du mappa dataproperty från det.

Ett sätt att göra det skulle vara

  getTestData(): Observable<TestObject>{
    const url = 'https://api.myjson.com/bins/11x4bx';

    // return this.http.get(url).pipe(
    //   map(response => ((response || {} as any).data || []).map(testData => this.mapTest(testData))));


    return this.http.get(url).pipe(
      map((resp: any) => {
          return <TestObject> {
            id: resp.data.id,
            view: resp.data.view,
            resourceName: resp.data.resourcename,
            loadCapacity: resp.data.loadcapacity
          }
      })
      );


  }

Renare sätt

  getTestData(): Observable<TestObject>{
    const url = 'https://api.myjson.com/bins/11x4bx';
    return this.http.get(url).pipe(pluck('data'));
  }

Svar #2

När du inte är säker på hur du ska bygga ett gränssnitt för ditt svar kan du använda JSON2TS

declare module namespace {

    export interface Meta {
        entityName: string;
    }

    export interface Data {
        id: string;
        view: string;
        startdate: string;
        enddate: string;
        erp: string;
        loadcapacity: string;
        userid: string;
        resourceid: string;
        resourcename: string;
        userdatalimitationid: string;
        requestleaveforself: boolean;
        bookforself: boolean;
        lastmodified: string;
    }

    export interface RootObject {
        meta: Meta;
        data: Data;
    }

}

Relaterade artiklar