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>