使用接口映射来自 http 请求的嵌套数组响应

Question

我有来自 Api 的响应数据，我发送为 json.send({message: 'success', itineraries: 'flight'})

然后我在 Angular 中执行我的获取请求以检索响应。响应看起来像

[  
    {  
       "AirItinerary":{  
          "OriginDestinationOptions":{  
             "OriginDestinationOption":[  
                {  
                   "FlightSegment":[  
                      {  
                         "DepartureAirport":{  
                            "LocationCode":"JFK"
                         },
                         "ArrivalAirport":{  
                            "LocationCode":"LAX"
                         },
                         "MarketingAirline":{  
                            "Code":"AS"
                         },
                         "ArrivalTimeZone":{  
                            "GMTOffset":-7
                         },
                         "TPA_Extensions":{  
                            "eTicket":{  
                               "Ind":true
                            }
                         },
                         "StopQuantity":0,
                         "ElapsedTime":375,
                         "ResBookDesigCode":"R",
                         "MarriageGrp":"O",
                         "Equipment":{  
                            "AirEquipType":"32S"
                         },
                         "DepartureDateTime":"2018-10-07T16:55:00",
                         "ArrivalDateTime":"2018-10-07T20:10:00",
                         "FlightNumber":1413,
                         "OnTimePerformance":{  
                            "Percentage":"NNN"
                         },
                         "OperatingAirline":{  
                            "FlightNumber":1413,
                            "Code":"AS"
                         },
                         "DepartureTimeZone":{  
                            "GMTOffset":-4
                         }
                      }
                   ],
                   "ElapsedTime":375
                },
                {  
                   "FlightSegment":[  
                      {  
                         "DepartureAirport":{  
                            "LocationCode":"LAX"
                         },
                         "ArrivalAirport":{  
                            "LocationCode":"JFK"
                         },
                         "MarketingAirline":{  
                            "Code":"AS"
                         },
                         "ArrivalTimeZone":{  
                            "GMTOffset":-4
                         },
                         "TPA_Extensions":{  
                            "eTicket":{  
                               "Ind":true
                            }
                         },
                         "StopQuantity":0,
                         "ElapsedTime":315,
                         "ResBookDesigCode":"R",
                         "MarriageGrp":"O",
                         "Equipment":{  
                            "AirEquipType":"32S"
                         },
                         "DepartureDateTime":"2018-10-20T07:35:00",
                         "ArrivalDateTime":"2018-10-20T15:50:00",
                         "FlightNumber":1404,
                         "OnTimePerformance":{  
                            "Percentage":"NNN"
                         },
                         "OperatingAirline":{  
                            "FlightNumber":1404,
                            "Code":"AS"
                         },
                         "DepartureTimeZone":{  
                            "GMTOffset":-7
                         }
                      }
                   ],
                   "ElapsedTime":315
                }
             ]
          },
          "DirectionInd":"Return"
       },
       "TPA_Extensions":{  
          "ValidatingCarrier":{  
             "Code":"AS"
          }
       },
       "SequenceNumber":1,
       "AirItineraryPricingInfo":{  
          "PTC_FareBreakdowns":{  
             "PTC_FareBreakdown":{  
                "FareBasisCodes":{  
                   "FareBasisCode":[  
                      {  
                         "BookingCode":"R",
                         "DepartureAirportCode":"JFK",
                         "AvailabilityBreak":true,
                         "ArrivalAirportCode":"LAX",
                         "content":"R21N6"
                      },
                      {  
                         "BookingCode":"R",
                         "DepartureAirportCode":"LAX",
                         "AvailabilityBreak":true,
                         "ArrivalAirportCode":"JFK",
                         "content":"R21XN6"
                      }
                   ]
                },

我通过订阅接收我的对象，然后转换它并将它作为可观察对象发送到我的组件。当它是一个对象时如何映射响应？我可以得到序列号，因为它在我的界面中是数字类型。我尝试使用第二个接口，但出现类型错误。

import { Itinerary, AirItineraryList } from "./../models/Itinerary";
import { Subject } from "rxjs";
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

import { map } from "rxjs/operators";

@Injectable({
  providedIn: "root"
})
export class InstantSearchService {
  Itineraries: Itinerary[] = [];
  private updatedItineraries = new Subject<Itinerary[]>();

  constructor(private http: HttpClient) {}

  getItineraries() {
    console.log('getting')
    this.http
      .get<{ message: string; Itineraries: Itinerary[] }>(
        "http://localhost:3000/cities/instant"
      )
      .pipe(
        map(ItineraryData => {
          return ItineraryData.Itineraries.map(flight => {
            return {
              AirItinerary: flight.AirItinerary,
              SequenceNumber: flight.SequenceNumber
            };
          });
        })
      )
      .subscribe(transIten => {
        this.Itineraries = transIten;
        this.updatedItineraries.next([...this.Itineraries]);
      });
  }

  getItineraryUpdateListener() {
    return this.updatedItineraries.asObservable();
  }
}

界面

export interface Itinerary {
  AirItinerary:AirItineraryList[];
  SequenceNumber: Number;

}
export interface AirItineraryList {
  OriginDestinationOptions: Object;
  DirectionInd: string;
}

Answer 1

我最终使用了多个接口，这些接口返回到我原来的 Itinerary 接口并将其映射到一个对象中的值。

使用接口映射来自 http 请求的嵌套数组响应

Use interface to map nested Array response from http request

node.js

angular6

rxjs6