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

Question

我有一个来自 API 的响应数据，我以 json.send({message： 'success'， 行程： 'flight'}

(然后，我在 Angular 中执行我的 get 请求以检索响应。 响应如下所示

[  
{  
"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

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