Question

我有一些问题需要了解如何将我的json响应转换为适合我的多重选择接口。

以下是我从api获得的回复：

＆＃13;

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

＆＃13;

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

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

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

正如我所说的那样，我在角度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的接口

1 个答案: