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

我无法在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
    }
  ]
}

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的，如下所示：

{
  "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
    }
  ]
}

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

getTemplate1（）：可观察{
返回此.http.get（“http://localhost:8080/RestEasyWebApp/rest/restAPI/getCostSheet/1")
.map（（response:response）=>response.json（））
.do（数据=>console.log（[data]））
.接住（这个.把手错误）；
} 

---

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

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

getTemplate1（）：可观察{
返回此.http.get（“http://localhost:8080/RestEasyWebApp/rest/restAPI/getCostSheet/1")
.map（（response:response）=>response.json（））
.do（（数据）=>
{
控制台日志（数据）；
console.log（data.sectionList[0].sectionName）
})
.接住（这个.把手错误）；
} 

可能是为了帽子？SectionList->SectionList到底是什么问题？在哪里无法获取数据？我调用此函数的方式如下：itemService.getTemplate1（）.subscribe（temp1=>this.sect1=temp1，error=>this.errorMessage=error）；但我只在Template1中获取值，而不是在SectionsList、SubSectionsList和FieldPropertiesOkay的变量中获取值，您是否检查过网络选项卡中是否确实收到了所有响应？你在哪里确定这些价值观不会出现？您的控制台是否已将其记录在订阅中，或者

中是否也没有这些值？或者在哪里？：）是的，我在网络选项卡中获取所有响应是的，我像这样调用此函数。itemService.getTemplate1（）.subscribe（temp1=>this.sect1=temp1，error=>this.errorMessage=error）；但我只在Template1中获得值，而不是在SectionsList、SubSectionsList和FieldProperties中