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 .

Yash Rami · Accepted Answer · 2020-07-05 20:03:57Z

4

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>

answered Jul 5, 2020 at 20:03

Yash Rami

2,3371 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JAVA_CAT Over a year ago

I tried this. Problem what I am facing is the field Values are coming multiple times. But as per the data mentioned in the question data.value should come only once for valueofcoding.

JAVA_CAT Over a year ago

May be an issue with the looping statement. Each iteration it prints Values which should not happen in this case as per the given data.

JAVA_CAT Over a year ago

Also not sure how to show the testdata and dummydata array values.

JAVA_CAT Over a year ago

Is there any way to access each field with object.stringname. Because this is creating a big issue for me. Field label name also showing multiple times.

Yash Rami Over a year ago

for showing an array data you can iterate the loop without keyvalue pipe and you can also modify the object in your TS as per your requirement

Collectives™ on Stack Overflow

iterating a json array in angular

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related