[英]Mapping json object to interface with HttpClient
I'm having some problem understanding how I can transform my json response to fit my interface for a multiselect. 我在理解如何转换json响应以适合多选接口时遇到了一些问题。
Here's the response that I'm getting from the api: 这是我从api获得的响应:
[ { "TransportTypeId": 1, "Code": "RT ", "Name": "Round Trip " }, { "TransportTypeId": 2, "Code": "N/A ", "Name": "UnAllocated " }, { "TransportTypeId": 3, "Code": "OWOut ", "Name": "OneWay Out " }, { "TransportTypeId": 4, "Code": "OWHome ", "Name": "OneWay Home " } ]
This is the interface that I'm trying to map it to: 这是我尝试将其映射到的接口:
export interface IMultiSelectOption {
id: any;
name: string;
isLabel?: boolean;
parentId?: any;
params?: any;
classes?: string;
}
I would like to map TransportTypeId
to id
and Name
to name
. 我想将TransportTypeId
映射到id
并将Name
映射到name
。
As I said I'm using the new HttpClient
in angular 4 and I'm having some difficulties finding any example like this. 正如我说的那样,我在角度4中使用了新的HttpClient
在查找类似这样的示例时遇到了一些困难。
this is my get function: 这是我的get函数:
getTransportTypes(): Observable<TransportType> {
let options: TransportType;
let multiselect: IMultiSelectOption
let requestUri = '/BaseData/TransportTypes';
debugger;
return this.http.get<TransportType>(`${this.flighttransportcapacityUrl}${requestUri}`)
}
This is returning the response and mapping it to TransportType that is exactly the same as the response properties: 这将返回响应并将其映射到与响应属性完全相同的TransportType:
export class TransportType{
TransportTypeId: number;
Code: string;
Name: string;
}
This is working correctly but I was thinking there should be some easier way of converting the response to IMultiSelectOption
then to loop over the result of the get function? 这可以正常工作,但我认为应该有一些更简单的方法将响应转换为IMultiSelectOption
然后遍历get函数的结果?
Including my dirty way of doing it. 包括我的肮脏方式。
this.base.getTransportTypes().map(item => this.convertToMultiSelect(item)).subscribe(options => this.transportOptions = options)
and the convertfunction: 和convertfunction:
convertToMultiSelect(item: any): IMultiSelectOption[] {
debugger;
let v = item;
let options = [];
for (var i = 0; i < item.length; i++) {
options.push({ id: item[i].TransportTypeId, name: item[i].Name})
}
return options;
}
When you want to convert a list of objects to a new list of the same size, use the map()
method. 如果要将对象列表转换为相同大小的新列表,请使用map()
方法。 So the code could look like this: 所以代码看起来像这样:
this.base.getTransportTypes()
.map(transportTypes => transportTypes
.map(trType => ({ id: trType.TransportTypeId, name: trType.Name }))
)
.subscribe(options => this.transportOptions = options)
Or if you want to keep the convertToMultiSelect
method: 或者,如果您想保留convertToMultiSelect
方法:
convertToMultiSelect(items: TransportType[]): IMultiSelectOption[] {
return items.map(item => ({ id: item.TransportTypeId, name: item.Name }));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.