How to parse json file in angular2 using multiple ngFor?

Question

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>

Answer 1

I guess that you use the observable used to get data instead of the received data. Perhaps you could use the async pipe to fix your problem.

@Component({
  (...)
  template: `
    <div class="row">
      <div *ngFor="#comp of record | async">
    (...)
  `
})
export class MyComp {
   constructor(http:Http) {
     this.record = http.get('http://...').map(res => res.json());
   }
}

Edit

ngFor can only iterate over arrays not objects. It see that the pageObj attribute in your JSON is an object not an array...

You could update your template code as described below:

<div class="row">
  <div *ngFor="#comp of record">
    {{comp.name}}
    <div>
        {{comp.pageObj.entity}}
        <div *ngFor="#pRow of comp.pageObj.pageRows">
           (...)
        </div>
    </div>
  </div>
</div>