[英]Casting Response from HTTP Post to List of Typescript Objects
I have a call to my web API already written. 我已经调用了我的Web API。 The API returns a list of objects serialized in JSON.
该API返回以JSON序列化的对象列表。 I know that there are fairly reasonable ways to cast individual items from JSON to typescript objects, but I cant figure out a way to do this casting to make it return a list of a typescript object.
我知道有相当合理的方法将单个项目从JSON转换为打字稿对象,但是我想不出一种方法来进行这种转换以使其返回打字稿对象的列表。
I need to cast to a typescript object as there is a function in the object I want to be able to run, but without casting the function does not exist. 我需要强制转换为打字稿对象,因为该对象中有一个我希望能够运行的函数,但不强制转换该函数不存在。
Here is the code used to retrieve the JSON: 这是用于检索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()));
}
And here is the Train object I am trying to cast to: 这是我尝试投射到的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);
}
}
I have looked at the following SO posts: 我看了以下SO帖子:
JSON to TypeScript class instance? JSON转换为TypeScript类实例?
Angular2 HTTP GET - Cast response into full object Angular2 HTTP GET-将响应转换为完整对象
Create a response wrapper class. 创建一个响应包装器类。 This should match with the API response structure.
这应与API响应结构匹配。
export declare class ResponseWrapper<T> {
static SUCCESS: number;
data: Array<T>;
}
Then map the response as follows. 然后按如下所示映射响应。
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()));
} }
Usage : 用法:
trainList : Train[];
constructor(private trainService: TrainService) {
this.trainService.findTrainPage()
.subscribe(data =>{
const resultsWrapper:ResponseWrapper<Train> = data;
this.trainList = resultsWrapper.data;
});
// error => this.errorMessage = error);
}
Here is the tested source https://gitlab.com/supun/angular-stack-overflow-ref 这是经过测试的源https://gitlab.com/supun/angular-stack-overflow-ref
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.