Angular2 将嵌套的 json 数组映射到模型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40967599/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 Mapping nested json array to model
提问by PingPong
I am not able to map the nested json array which is response from Web to my model array in Angular2. Suppose I have json array response as below:
我无法将作为 Web 响应的嵌套 json 数组映射到 Angular2 中的模型数组。假设我有如下的 json 数组响应：
[{
"base_url": "http://mysearch.net:8080/",
"date": "2016-11-09",
"lname": "MY PROJ",
"name": "HELLO",
"description": "The Test Project",
"id": 10886789,
"creationDate": null,
"version": "2.9",
"metrics": [{
"val": 11926.0,
"frmt_val": "11,926",
"key": "lines"
},
{
"val": 7893.0,
"frmt_val": "7,893",
"key": "ncloc"
}],
"key": "FFDFGDGDG"
}]
I was trying to manually map the fields referring the link Angular 2 observable doesn't 'map' to modelto my model and was able to display those in my HTML by iterating through ngFor.....but I want to also display ncloc and lines value also in the HTML but I am not sure how to map those values to my Model array like mentioned in the above link. Can you please help me with this?
我试图手动映射引用链接Angular 2 observable 没有“映射”到模型到我的模型的字段，并且能够通过遍历 ngFor 来在我的 HTML 中显示这些字段.....但我还想显示 ncloc和行值也在 HTML 中，但我不确定如何将这些值映射到我的模型数组，如上述链接中所述。你能帮我解决这个问题吗？
Thanks.
谢谢。
EDIT
编辑
Mode class
模式类
export class DeiInstance {
base_url: string;
date: string;
lname : string;
name : string;
id : number;
key:string;
constructor(obj: DeiInstance) {
this.sonar_url = obj['base_url'];
this.lname = obj['lname'];
this.name = obj['name'];
this.id = obj['id'];
this.key = obj['key'];
this.date = obj['date'];
}
// New static method.
static fromJSONArray(array: Array<DeiInstance>): DeiInstance[] {
return array.map(obj => new DeiInstance(obj));
}
}
回答by M4R1KU
You can simplify your model and your mapping a lot. You don't need to map your API response manually. JavaScript/TypeScript can do this for you.
您可以大大简化模型和映射。您无需手动映射 API 响应。JavaScript/TypeScript 可以为您做到这一点。
First you need multiple interfaces.
首先你需要多个接口。
export interface DeiInstance {
base_url: string;
date: string;
lname: string;
name: string;
description: string;
id: number;
creationDate: string; //probably date
version: string
metrics: Metric[];
key: string;
}
export interface Metric {
val: decimal;
frmt_val: decimal;
key: string;
}
You can then use the as-"operator" of TypeScriptto cast your API response to the DeiInstance Type.
然后，您可以使用TypeScript的as-"operator"将您的 API 响应转换为 DeiInstance 类型。
sealSearch(term: string): Observable<DeiInstance[]> {
return this.http.get(this.sealUrl + term)
.map(response => response.json() as DeiInstance[])
.catch(this.handleError);
}
If you use interfaces instead of classes you have also the advantage that you have less production code which will be sended to the client browser. The interface is only there for pre-compile-time or however you want to call it.
如果您使用接口而不是类，您还有一个优势，即发送到客户端浏览器的生产代码更少。该接口仅用于预编译时或您想要调用的方式。
Hope my code works and it solves your problem.
希望我的代码有效并解决了您的问题。
