Angular2 mapping nested json array to model

Question

I cannot match the nested json array, which is the response from the Web to my model array in Angular2. Suppose I have a json array response as shown below:

[{ "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 tried to manually match the fields that reference the Angular 2 link of the observable, not to “match” the models with my model and was able to display these in my HTML, iterating through ngFor ..... but I also want to display the value of ncloc and lines in HTML, but I'm not sure how to match these values ​​with my Model array, as indicated in the link above. Could you help me with this?

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

Answer 1

You can greatly simplify your model and your mapping. You do not need to manually display the API response. JavaScript / TypeScript can do this for you.

First you need some 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; } 

Then you can use the as - " TypeScript operator to pass the API response to the DeiInstance type.

  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 also have the advantage that you have less production code that will be sent to the client browser. The interface is only available for preliminary compilation or, nevertheless, you want to call it.

Hope my code works and it solves your problem.

Answer 2

Can someone help me with a similar problem? I get an answer that is a JSON Array with several parameters inside the object. Something like that:

 {[ { name, title, id, image, price, description, }, { name, title, id, image, price, description, }, { name, title, id, image, price, description, }, { name, title, id, image, price, description, }, { name, title, id, image, price, description, }, ]} 

I just want to convey the title and description and created a new model in typewriting too, but I don’t know how to use the MAP operator in RXJS to achieve the same. Any help would be appreciated. I am using Angular 7.