iterating a json array in angular

Question

I have a Json string which looks like below.

{ "testdata": [{ "id": 1, "name": "testname1 ", "description": "test description1" }, { "id": 2, "name": "testname2 ", "description": "test description2" }, { "id": 3, "name": "testname3 ", "description": "test description3" } ], "dummydata": [{ "category": "Test with dummy data", "testdata": [{ "id": 5, "name": "testname1", "description": "test description1." }], "testnos": 12, "testresult": "success" }, { "category": "Test with original data", "testdata": [{ "id": 7, "name": "testname3", "description": "test description3." }], "testnos": 19, "testresult": "success" } ], "valueofcoding": 22, "valueoftesting": 21, "valueofbugfix": 6 } 

This how I get the json response in my angular class. I am not sure how to show the values in the html using angular.

 <tr *ngFor="let data of dataArray"> <td class="my-table-header"><span class="badge badge-light">Values</span></td> <td class="cntr"><input type="text" readonly class="form-control-plaintext my-table-header-val" value="{{data.valueofcoding}}"/></td> <td class="cntr"><input type="text" readonly class="form-control-plaintext my-table-header-val" value="{{data.valueoftesting}}"/></td> <tr> 

valueofCoding and valueoftesting are not part of the array of array. So I did like above but I am getting below error.

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. 

I have seen some of the post which is giving same sort of error. But this json format is entirely different and complex. Please help me to sort out this .

Answer 1

dataArray is an Object and *ngFor with is used for the array so if you want to iterate loop over the object in html you can use *ngFor with keyvalue pipe so you can try like this.

 <tr *ngFor="let data of dataArray | keyvalue"> <td class="my-table-header"><span class="badge badge-light">Values</span></td> <td class="cntr" *ngIf="data.key === 'valueofcoding'"><input type="text" readonly class="form-control-plaintext my-table-header-val" value="{{data.value}}"/></td> <td class="cntr" *ngIf="data.key === 'valueoftesting'"><input type="text" readonly class="form-control-plaintext my-table-header-val" value="{{data.value}}"/></td> <tr>