How to parse json file in angular2 using multiple ngFor?
<p>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:</p>

<pre><code>EXCEPTION: Cannot find a differ supporting object '[object Object]' in [comp in ParserComponent@2:13]
</code></pre>

<p>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</p>

<p>1.<strong>Json File</strong>
<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>[{
    "_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"
}
]</code></pre>
</div>
</div>
</p>

<p><strong>2.parser.component.ts</strong></p>

<pre><code>&lt;div class="row"&gt;
&lt;div *ngFor="#comp of record"&gt;
    {{comp.name}}
    &lt;div *ngFor="#temp of comp.pageObj"&gt;
        {{temp.entity}}
        &lt;div *ngFor="#pRow of temp.pageRows"&gt;
            &lt;div *ngFor="#temp of comp.pageObj"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>