将来自 HTTP Post 的响应转换为 Typescript 对象列表

Question

我已经编写了对我的 Web API 的调用。 API 返回以 JSON 序列化的对象列表。我知道有相当合理的方法可以将单个项目从 JSON 转换为 typescript 对象，但我想不出一种方法来进行这种转换以使其返回 typescript 对象的列表。

我需要转换为 typescript 对象，因为我希望能够运行的对象中有一个函数，但不转换该函数不存在。

这是用于检索 JSON 的代码：

  findTrainPage(filter = '', sortOrder = 'desc', pageNumber = 0, pageSize = 15, departStart=null, departEnd=null, origStatusWhitelist=null): Observable<Train[]>
  {
    //retrieves a page of trains to display in the train list
    let url = AppUtils.backendApiUrl() + '/trainList/getPage';
    let requestBody = { 'filter': filter, 'sortOrder': sortOrder, 'pageNum': pageNumber, 'pageSize': pageSize, 'departStart': departStart, 'departEnd': departEnd, 'origStatusWhitelist': origStatusWhitelist };
    let options = new RequestOptions({ headers: AppUtils.commonHttpHeaders() });
    let headers = { headers: AppUtils.commonHttpHeaders() };
    return this.http.post(url, requestBody, headers).map(res => res.json()).catch(error => Observable.throw(error.json()));
  }

这是我要转换到的 Train 对象：

export class Train implements TrainInterface
{
  trainGUID: string;
  trainSymbol: string;
  createTime: string; //Should be formatted as a date, SQL table uses smalldatetime
  departTime: string;
  origStatus: OriginalStatuses;
  badGUIDFlag: boolean;
  trips: Trip[];

  private _evalStatus: EvalStatuses;
  get evalStatus(): EvalStatuses
  {
    return this.trips.reduce((min, p) => p.evalStatus < min ? p.evalStatus : min, this.trips[0].evalStatus);
  }
}

我查看了以下 SO 帖子：

JSON to TypeScript class instance?

Angular2 HTTP GET - Cast response into full object

Answer 1

创建一个响应包装类。这应该与 API 响应结构匹配。

export declare class ResponseWrapper<T> {
    static SUCCESS: number;
     data: Array<T>;
}

然后将响应映射如下。

 findTrainPage(filter = '', sortOrder = 'desc', pageNumber = 0, pageSize = 15, departStart = null, departEnd = null, origStatusWhitelist = null): Observable<any> {
//retrieves a page of trains to display in the train list
// let url = AppUtils.backendApiUrl() + '/trainList/getPage';
const url = 'assets/mockdata.json';
let requestBody = {
  'filter': filter,
  'sortOrder': sortOrder,
  'pageNum': pageNumber,
  'pageSize': pageSize,
  'departStart': departStart,
  'departEnd': departEnd,
  'origStatusWhitelist': origStatusWhitelist
};
let options = new RequestOptions();
return this.http.get(url)
           .map(res => res.json())
           .catch(error => Observable.throw(error.json()));

}

用法：

trainList : Train[];

  constructor(private trainService: TrainService) {
    this.trainService.findTrainPage()
        .subscribe(data =>{
        const  resultsWrapper:ResponseWrapper<Train> = data;
        this.trainList = resultsWrapper.data;
        });
       //   error => this.errorMessage = error);
  }

这里是测试源https://gitlab.com/supun/angular-stack-overflow-ref