如何在 Angular 2 的 TypeScript 中映射嵌套的 Json

Posted 2023-03-22

【中文标题】如何在 Angular 2 的 TypeScript 中映射嵌套的 Json

【英文标题】：How to map the nested Json in TypeScript in Angular 2

【发布时间】：2017-09-23 15:15:44

【问题描述】：

我无法在 Angular2 的 TypeScript 中映射嵌套的 json。 .

我的Json结构是这样的：

  "templateId": 5,
  "sectionsList": [
    
      "sectionName": "ITEMHEADER",
      "subSectionsList": [
        

        
      ],
      "fieldProperties": [
        
          "fieldName": "CustomerItemReferenceNo",
          "isUsedForTotals": "N"
        ,
        
          "fieldName": "LFItemReferenceNo",
          "isUsedForTotals": "N"
        ,
        
          "fieldName": "ItemName",
          "isUsedForTotals": "N"
        ,
        
          "fieldName": "ItemDescription",
          "isUsedForTotals": "N"
        ,
        
          "fieldName": "LFDivision",
          "value": "CMN_V_ORGANIZATION.DIVISION_CODE",
          "isUsedForTotals": "N"
        ,
        
          "fieldName": "LFDepartment",
          "value": "CMN_V_ORGANIZATION.DEPARTMENT_CODE",
          "isUsedForTotals": "N"
        ,
        
          "fieldName": "LFSourcingOffice",
          "value": "CMN_V_OFFICE.OFFICE_CODE",
          "isUsedForTotals": "N"
        
      ],
      "total": 0
    ,
    
      "sectionName": "MATERIAL",
      "subSectionsList": [
        
          "subSectionName": "FABRIC",
          "fieldProperties": [
            
              "fieldName": "MaterialPriority",
              "isUsedForTotals": "N"
            ,
            
              "fieldName": "SupplierMaterialID",
              "isUsedForTotals": "N"
            ,
            
              "fieldName": "CountryofOrigin",
              "value": "CMN_V_COUNTRY.COUNTRY_CODE",
              "isUsedForTotals": "N"
            ,
            
              "fieldName": "MATERIALPRICE",
              "isUsedForTotals": "Y"
            ,
            
              "fieldName": "TotalFabricCost",
              "isUsedForTotals": "Y"
            
          ],
          "totals": 0
        
      ],
      "fieldProperties": [

      ],
      "total": 0
    ,
    
      "sectionName": "MATERIAL",
      "subSectionsList": [
        
          "subSectionName": "TRIMS",
          "fieldProperties": [
            
              "fieldName": "MaterialPriority",
              "isUsedForTotals": "N"
            ,
            
              "fieldName": "SupplierMaterialID",
              "isUsedForTotals": "N"
            ,
            
              "fieldName": "MaterialContent&Description",
              "isUsedForTotals": "N"
            ,
            
              "fieldName": "CountryofOrigin",
              "value": "CMN_V_COUNTRY.COUNTRY_CODE",
              "isUsedForTotals": "N"
            ,
            
              "fieldName": "MATERIALPRICE",
              "isUsedForTotals": "Y"
            ,
            
              "fieldName": "TotalTrimCost",
              "isUsedForTotals": "Y"
            
          ],
          "totals": 0
        
      ],
      "fieldProperties": [

      ],
      "total": 0
    ,
    
      "sectionName": "PACKAGING",
      "subSectionsList": [
        

        
      ],
      "fieldProperties": [
        
          "fieldName": "Packagingcostperpackingcomponent",
          "isUsedForTotals": "Y"
        ,
        
          "fieldName": "TotalPackagingCost",
          "isUsedForTotals": "Y"
        
      ],
      "total": 0
    
  ]

而类是写的就是映射的Json是这样的：

export interface Template1  
    templateId: number;
    sectionsList:SectionsList[];    


 export interface SectionsList  
    sectionName: string;
    subSectionsList:SubSectionsList[];
    fieldProperties:FieldProperties[];
    total:number;  
 

 export interface SubSectionsList  
    subSectionName: string;    
    fieldProperties:FieldProperties[];
    total:number;  
 

 export interface FieldProperties  
    fieldName: string;   
    value:string; 
    isUsedForTotals:string;
 

我从 Json 映射的服务是：

getTemplate1():Observable<Template1 []>
        return this.http.get("http://localhost:8080/RestEasyWebApp/rest/restAPI/getCostSheet/1")
           .map((response: Response) => response.json())          
            .do(data => console.log([data]))
            .catch(this.handleError);
     

注意：例如->我只从“templateId”获取数据，而不是从“sectionList.sectionName”获取数据

【问题讨论】：

也许是帽子？部分列表 -> 部分列表

到底是什么问题？哪里无法获取数据？

我这样调用这个函数 this.itemService.getTemplate1().subscribe( temp1 => this.sect1=temp1, error => this.errorMessage = error);但我只在 Template1 中获得价值，而不是在 SectionsList 、SubSectionsList 和 FieldProperties 的变量中

好的，您是否检查过您是否确实收到了网络选项卡中的所有响应？你在哪里确定价值观不会到来？您是否将其控制台记录在订阅中，或者.do 中的值也不存在？还是在哪里？ :)

是的，我在网络选项卡中得到所有响应

【参考方案1】：

SectionList 是对象数组。因此，您必须获取第一个对象的 sectionName，例如：

建议：最好使用订阅。

getTemplate1():Observable<Template1 []>
    return this.http.get("http://localhost:8080/RestEasyWebApp/rest/restAPI/getCostSheet/1")
       .map((response: Response) => response.json())          
       .do((data) => 
           
            console.log(data);
            console.log(data.sectionList[0].sectionName) 
            )
        .catch(this.handleError);
 

【讨论】：

是的，我这样调用这个函数 this.itemService.getTemplate1().subscribe( temp1 => this.sect1=temp1, error => this.errorMessage = error);但我只在 Template1 中获得价值，而不是在 SectionsList 、SubSectionsList 和 FieldProperties 中获得价值