将 json 对象映射到与 HttpClient 的接口

Question

我在理解如何转换 json 响应以适应多选界面时遇到一些问题。

这是我从 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         "
  }
]

这是我要将其映射到的界面：

export interface IMultiSelectOption {
    id: any;
    name: string;
    isLabel?: boolean;
    parentId?: any;
    params?: any;
    classes?: string;
}

我想将 TransportTypeId 映射到 id 并将 Name 映射到 name。

正如我所说，我在 angular 4 中使用新的 HttpClient，但我很难找到这样的示例。

这是我的获取函数：

getTransportTypes(): Observable<TransportType> {
    let options: TransportType;
    let multiselect: IMultiSelectOption
    let requestUri = '/BaseData/TransportTypes';
    debugger;
    return this.http.get<TransportType>(`${this.flighttransportcapacityUrl}${requestUri}`)
}

这是返回响应并将其映射到与响应属性完全相同的 TransportType：

export class TransportType{
    TransportTypeId: number;
    Code: string;
    Name: string;
}

这工作正常，但我认为应该有一些更简单的方法将响应转换为 IMultiSelectOption 然后循环 get 函数的结果？

包括我的肮脏方式。

    this.base.getTransportTypes().map(item => this.convertToMultiSelect(item)).subscribe(options => this.transportOptions = options)

和转换函数：

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;
}

Answer 1

当您想将对象列表转换为相同大小的新列表时，请使用map() 方法。所以代码可能如下所示：

this.base.getTransportTypes()
  .map(transportTypes => transportTypes
    .map(trType => ({ id: trType.TransportTypeId, name: trType.Name }))
  )
  .subscribe(options => this.transportOptions = options)

或者如果您想保留 convertToMultiSelect 方法：

convertToMultiSelect(items: TransportType[]): IMultiSelectOption[] {
  return items.map(item => ({ id: item.TransportTypeId, name: item.Name }));
}

将 json 对象映射到与 HttpClient 的接口

Mapping json object to interface with HttpClient

angular

angular-httpclient