將HTTP響應映射到JSON並將JSON映射到模型的問題

Question

我試圖將http響應映射到JSON，然後將該JSON的一部分映射到Ticket接口，因爲它有許多值我不需要在我的票務界面中。我的應用程序編譯沒有任何問題，但是當我測試REST函數時，我得到了下面的運行時錯誤，我知道問題不在後端，因爲我能夠成功地控制檯記錄響應。任何想法我在這裏做錯了嗎？

My error: 

    vendor.bundle.js:8137 Angular is running in the development mode. Call enableProdMode() to enable the production mode. 
    main.bundle.js:553 TypeError: res.json(...).map is not a function 
     at MapSubscriber.project (main.bundle.js:1330) 
     at MapSubscriber._next (vendor.bundle.js:42853) 
     at MapSubscriber.Subscriber.next (vendor.bundle.js:4709) 
     at XMLHttpRequest.onLoad (vendor.bundle.js:47289) 
     at ZoneDelegate.webpackJsonp.749.ZoneDelegate.invokeTask (polyfills.bundle.js:2478) 
     at Object.onInvokeTask (vendor.bundle.js:9228) 
     at ZoneDelegate.webpackJsonp.749.ZoneDelegate.invokeTask (polyfills.bundle.js:2477) 
     at Zone.webpackJsonp.749.Zone.runTask (polyfills.bundle.js:2245) 
     at XMLHttpRequest.ZoneTask.invoke (polyfills.bundle.js:2540) 


My code: 

    retrieveTicket(barcode: string) : Observable<any> { 
      return this.http.get(`${this.API_URL}POS/RetrieveTicket/${barcode}`, this.options) 
      .map((res: Response) => res.json().map(ticket => {   
       Object.assign({ 
        ResponseCode: ticket.ResponseCode, 
        CustomError: ticket.CustomError, 
        ticketDate: ticket.POSTicket.Date, 
        ticketTime: ticket.POSTicket.EndTime, 
        cashierName: ticket.POSBarCode.POSCashier_Name, 
        tranNo: ticket.POSTicket.TranNo, 
        tranValue: ticket.POSTicket.ScanValue, 
        securityChecked: ticket.POSBarCode.SecurityChecked 
       }) as ITicket})   
     ) 
      .catch((error: any) => Observable.throw(error || 'server error')); 
     } 


my interface: 

     import { BaseRequestInterface } from './base-request.interface'; 

     export interface ITicket extends IBaseRequest { 
      ticketDate: string; 
      ticketTime: string; 
      cashierName: string; 
      tranNo: string; 
      tranValue: string; 
      timeSincePurchase: string; 
      securityChecked: boolean; 

      export function setTicket(obj?: any) { 
       super(); 
       this.ResponseCode = obj && obj.ResponseCode || null; 
       this.CustomError = obj && obj.CustomError || null; 
       this.ticketDate = obj && obj.ticketDate || null; 
       this.ticketTime = obj && obj.ticketTime || null; 
       this.cashierName = obj && obj.cashierName || null;   
       this.tranNo = obj && obj.tranNo || null; 
       this.tranValue = obj && obj.tranValue || null; 
       this.timeSincePurchase = obj && obj.timeSincePurchase || null; 
       this.securityChecked = obj && obj.securityChecked || null; 
      } 


     } 

my BaseRequest Interface: 

// Base request class that returns from BRMService API 
export interface IBaseRequest { 
    // Public properties available 
    BaseURI?: string; 
    CustomError?: string; 
    ProviderName?: string; 
    RequestFormData?: string; 
    RequestURI?: string; 
    ResponseCode?: number;  
} 

Answer 1

編輯：

我們瞭解到，我們正在處理的只是一個對象，而不是對象的數組，所以映射對象類型TicketModel想做到以下（縮短）：

retrieveTicket(barcode: string) { 
    return this.http.get(...) 
    .map(res => res.json()) 
    .map(res => ({ResponseCode:res.ResponseCode, CustomError:res.CustomError}) as TicketModel) 
} 

接口：

export interface TicketModel { 
    ResponseCode: number; 
    CustomError:string 
} 

DEMO

---

原貼：

還不清楚，如果您正在使用您的TicketModel類或接口，反正我建議你使用的接口;）然後，你可以簡單地映射您的傳入數據如（縮短版本）：

.map((res:Response) => res.json().map(x => 
    Object.assign({ResponseCode: x.ResponseCode, 
        CustomError:x.CustomError}) as TicketModel))) 

如果你的反應是用含有內items一個數組的對象，只需添加items在：

.... res.json().items.map(...