Angular4 - Observable Map JSON to Particular Object

Question

I am receiving the below JSON which i am trying to map to the objects i have defined

{
   "nodes":[
      {
         "branchId":1,
         "branchLevel":1,
         "branchOrder":1,
         "branchDescription":"BR01",
         "leaves":[
            {
               "clTechForm":"TF01",
               "branchId":1,
               "leafOrder":1
            },
            {
               "clTechForm":"TF02",
               "branchId":1,
               "leafOrder":2
            }
         ]
      }          
   ]
}

I have the following TypeScript Classes to which i am trying to map the JSON i have received above:

export class TreeMapper{
  constructor(public nodes: BranchMapper[]) {
  }
}

export class BranchMapper{
  constructor(public id: number, public name: string, public children: TechnicalFormMapper[]  ) {
  }
}

export class TechnicalFormMapper{
  constructor(public id: number, public name: string) {
  }
}

I would like to map the received JSON to the following JSON.

{
   "nodes":[
      {
         "id":1,
         "name":"BR01",
         "children":[
            {
               "name":"TF01",
               "id":1,
            },
            {
               "name":"TF02",
               "id":1,
            }
         ]
      }          
   ]
}

Here is my HTTP call to the Backend:

  getTrees(): Observable<TreeMapper[]> { 
    return this.http.get('some url').map(
      (response: Response) => (response.json())
    ).catch(
      (error: Response) => {
        return Observable.throw('Nodes Fetch Failed');
      }
    );
  }

Please help me out in mapping to the Object i have defined above. Any help would be appreciated.

try out let me know its worked for you or let me know if you need more help — Pranay Rana
– Pranay Rana, Commented Mar 23, 2018 at 11:10
@PranayRana No, it doesn't work the JSON received doesn't map to the TreeMapper Object even if we specify the return type as TreeMapper or the attribute type as TreeMapper — Adnan Abdul Khaliq
– Adnan Abdul Khaliq, Commented Mar 23, 2018 at 11:17
try this json2ts.com , create your class similar to your json structure , if your structure is not mapping it will not map with your object — Pranay Rana
– Pranay Rana, Commented Mar 23, 2018 at 12:31
Please start accepted answers that worked for you ...there is 0 selected answers — Pranay Rana
– Pranay Rana, Commented Mar 23, 2018 at 14:03
Sorry but it didn't worked for me! i am having the same issue.. — Adnan Abdul Khaliq
– Adnan Abdul Khaliq, Commented Mar 23, 2018 at 15:56

Pranay Rana · Accepted Answer · 2018-03-23 11:06:46Z

1

you dont require map, just do this

in service.ts

getTrees(): Observable<TreeMapper[]> { 
    return this.http.get('some url');
  }

in component.ts

treemappers: TreeMapper[];

getTrees() {
  this.service.getTress().subscribe(data => this.treemappers = data);
//write catch code
}

Async Pipe

if you are not doing any processing on data received from http call make use of async pipe it will do work for you

in service.ts

getTrees(): Observable<TreeMapper[]> { 
    return this.http.get('some url');
  }

in component.ts

treemappers: Observable<TreeMapper[]>;

getTrees() {
  this.service.getTress();
//write catch code
}

in component.thml

<table>
 //rest of code
 <tr *ngFor="let mapper of treemappers | async">
 //rest of code
</table>

answered Mar 23, 2018 at 11:06

Pranay Rana

177k37 gold badges244 silver badges266 bronze badges

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

Collectives™ on Stack Overflow

Angular4 - Observable Map JSON to Particular Object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related