Angular4-将JSON映射到特定对象

Question

我收到下面的JSON，我试图将其映射到已定义的对象

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

我尝试将上面收到的JSON映射到以下TypeScript类：

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

我想将接收到的JSON映射到以下JSON。

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

这是我对后端的HTTP调用：

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

请帮助我映射到上面定义的对象。 任何帮助，将不胜感激。

Answer 1

您不需要map ，只需执行此操作

在service.ts

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

在component.ts中

treemappers: TreeMapper[];

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

---

异步管道

如果您不对通过http调用接收到的数据进行任何处理，请使用async管道，它将为您工作

在service.ts

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

在component.ts中

treemappers: Observable<TreeMapper[]>;

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

在component.thml中

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