Angular2 Mapping nested json array to model

Question

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:

[{
    "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 model to 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?

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

Do you have more code of the current mapping and of the current Model? — M4R1KU
– M4R1KU, Commented Dec 5, 2016 at 7:29
Here's my Model :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)); } } — PingPong
– PingPong, Commented Dec 5, 2016 at 10:49
@M4R1KU And I am iterating through listProjects defined as DeiInstance[] in my component to display the fields in my HTML — PingPong
– PingPong, Commented Dec 5, 2016 at 11:05
I assume that you get your data from a backend API so can you add the TypeScript service class and the essential part in your component class. — M4R1KU
– M4R1KU, Commented Dec 5, 2016 at 11:38
sealSearch(term: string) : Observable<DeiInstance[]> { return this.http.get(this.sealUrl+term") .map(res => DeiInstance.fromJSONArray(res.json())) .catch(this.handleError); } This is service — PingPong
– PingPong, Commented Dec 5, 2016 at 11:49

Sandeep Roniyaar · Accepted Answer · 2017-09-15 11:13:13Z

22

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.

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 TypeScript to cast your 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 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.

edited Sep 15, 2017 at 11:13

Sandeep Roniyaar

2041 gold badge8 silver badges26 bronze badges

answered Dec 5, 2016 at 12:20

M4R1KU

7189 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PingPong Over a year ago

Thank you very much @M4R1KU. It worked for me. If I get any more doubts or I stuck further I would reach out to you. Thanks a lot !!!

M4R1KU Over a year ago

@RoshDesh nice to hear that. i woul also appreciate it if you would mark my answer as the solution to yozr problem ;D

Collectives™ on Stack Overflow

Angular2 Mapping nested json array to model

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related