I am trying to parse following json file.Json File is getting read successfully. but I want to render all the data inside this json file.thus I was using nested ngFor to do this.but I am facing this error:
EXCEPTION: Cannot find a differ supporting object '[object Object]' in [comp in ParserComponent@2:13]
I have included ngFor directive in too. I want to access all the data recursively. is there any way to do this? Thanks in advance
1.Json File
[{
"_id": "5694f0aab4d9a8e41f399491",
"name": "page10",
"pageType": "Header",
"wsId": "567159bc1d10306c25b5b3f6",
"desc": "pg10",
"createdDate": "2016-01-12T12:25:14.801Z",
"__v": 0,
"pageObj": {
"entity": "monthEndSummary",
"pageType": "pages",
"editMode": true,
"pageLayout": "DEFAULT_LAYOUT",
"pageName": "page10",
"pageRows": [
{
"sections": [
{
"sectionRows": [
{
"secRowColumns": [
{
"currentIndexInSectionRow": 0,
"isDynamic": true,
"cmpViewType": "Regular",
"uiLibrary": "LIB",
"uiCategory": "headers",
"uiComponent": "HEADING",
"mappings": [
{
"mapAttr": "src1"
},
{
"mapAttr": "src2"
},
{
"mapAttr": "src3"
},
{
"mapAttr": "customerName"
},
{
"mapAttr": "cardAccNo"
}
],
"data": {
"cardAccNo": "Card Account No",
"customerName": "Customer Name",
"src3": "http://localhost:3202/uploads/p3.png",
"src2": "http://localhost:3202/uploads/p2.png",
"src1": "http://localhost:3202/uploads/p1.png"
}
}
]
},
{
"secRowColumns": [
{
"currentIndexInSectionRow": 0,
"isDynamic": true,
"uiLibrary": "LIB",
"uiCategory": "info-blocks",
"uiComponent": "DYNAMIC-BODY-1",
"mappings": [
{
"mapAttr": "statementDate"
},
{
"mapAttr": "minAmtDue"
},
{
"mapAttr": "totalAmtDue"
},
{
"mapAttr": "stmtSummary"
},
{
"mapAttr": "creditSummary"
},
{
"mapAttr": "rewards"
},
{
"mapAttr": "bottomPara"
},
{
"mapAttr": "prevBalance"
},
{
"mapAttr": "purchases"
},
{
"mapAttr": "cashAdv"
},
{
"mapAttr": "payments"
},
{
"mapAttr": "creditLimit"
},
{
"mapAttr": "creditAvail"
},
{
"mapAttr": "pointsEarned"
},
{
"mapAttr": "payback"
},
{
"mapAttr": "dueDate"
},
{
"mapAttr": "Amt"
},
{
"mapAttr": "interest"
}
],
"data": {
"interest": "Interest will be levied if Total Amount Due is not paid",
"Amt": "Rs.",
"dueDate": "Due Date:",
"payback": "Points Transferred to PAYBACK(Acc:",
"pointsEarned": "Points Earned",
"creditAvail": "Available Credit",
"creditLimit": "Credit Limit",
"payments": "Payments/ Credits",
"cashAdv": "Cash Advances",
"purchases": "Purchases/ Charges",
"prevBalance": "Previous Balance",
"minAmtDue": "Minimum Amount Due",
"statementDate": "Statement Date"
}
}
]
},
{
"secRowColumns": [
{
"currentIndexInSectionRow": 0,
"isDynamic": true,
"uiLibrary": "IECP-LIB",
"uiCategory": "info-blocks",
"uiComponent": "DYNAMIC-BODY-2",
"mappings": [
{
"mapAttr": "topHeading"
},
{
"mapAttr": "cardNo"
},
{
"mapAttr": "date"
},
{
"mapAttr": "refNo"
},
{
"mapAttr": "transactionDetails"
},
{
"mapAttr": "rewardPt"
},
{
"mapAttr": "currency"
},
{
"mapAttr": "intAmt"
},
{
"mapAttr": "amt"
}
],
"data": {
"amt": "Amount(in)",
"intAmt": "International Amount",
"currency": "Currency",
"rewardPt": "Reward Points",
"transactionDetails": "Transaction Details",
"refNo": "Ref. Number",
"date": "Date",
"cardNo": "Card Number:",
"topHeading": "TRANSACTION DETAILS"
}
}
]
},
{
"secRowColumns": [
{
"currentIndexInSectionRow": 0,
"isDynamic": true,
"uiLibrary": "LIB",
"uiCategory": "Images",
"uiComponent": "IMAGE",
"mappings": [
{
"mapAttr": "heading"
},
{
"mapAttr": "src"
}
],
"data": {
"src": "http://localhost:3202/uploads/p4.png",
"heading": "Great offers on your card"
}
}
]
},
{
"secRowColumns": [
{
"currentIndexInSectionRow": 0,
"isDynamic": true,
"uiLibrary": "LIB",
"uiCategory": "Body",
"uiComponent": "STATIC-BODY-2",
"mappings": [
{
"mapAttr": "heading"
},
{
"mapAttr": "point1"
},
{
"mapAttr": "point2"
},
{
"mapAttr": "point3"
},
{
"mapAttr": "point4"
},
{
"mapAttr": "point5"
},
{
"mapAttr": "point6"
},
{
"mapAttr": "point7"
},
{
"mapAttr": "bottomText"
},
{
"mapAttr": "src"
},
{
"mapAttr": "signature"
}
],
"data": {
"signature": "Authorised Signatory",
"src": "http://localhost:3202/uploads/p9.png",
"bottomText": "For ",
"point7": "For payments made through cheque, we request you to make the paymentatleast3workingdaysbeforetheduedateincaseofchequeand%workingdaysbeforethe."
}
}
]
},
{
"secRowColumns": [
{
"currentIndexInSectionRow": 0,
"isDynamic": true,
"uiLibrary": "LIB",
"uiCategory": "Footer",
"uiComponent": "FOOTER",
"mappings": [
{
"mapAttr": "topParaLine1"
},
{
"mapAttr": "topParaLine2"
},
{
"mapAttr": "bottomParaLine1"
},
{
"mapAttr": "bottomParaLine2"
}
],
"data": {
}
}
]
}
]
}
]
}
]
},
"updatedDate": "2016-01-18T05:30:09.558Z"
}
]2.parser.component.ts
<div class="row">
<div *ngFor="#comp of record">
{{comp.name}}
<div *ngFor="#temp of comp.pageObj">
{{temp.entity}}
<div *ngFor="#pRow of temp.pageRows">
<div *ngFor="#temp of comp.pageObj">
</div>
</div>
</div>
</div>
