I am not able to map the nested json in TypeScript in Angular2. .
My Json structure is like this:
{
"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
}
]
}
And the class is have written is to map the Json is like this:
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;
}
And my service to map from Json is:
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);
}
Note: eg-> Only from ' templateId ' i am getting data but not from 'sectionList.sectionName'
SectionList is array of object. So you have to fetch sectionName of first object like:
Suggestion : better use subscribe.
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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.