How to loop this Group by json value in *ngFor in angular 9?

1
votes
{
    "ABC 111": [
        {
            "id": 01,
            "valueOne": 50,
            "valueTwo": "string",
            "valuethree": "string"
        },
        {
            "id": 02,
            "valueOne": 50,
            "valueTwo": "string",
            "valuethree": "string"
        }
    ],
    "XYZ 222": [
        {
            "id": 01,
            "valueOne": 50,
            "valueTwo": "string",
            "valuethree": "string"
        },
        {
            "id": 02,
            "valueOne": 50,
            "valueTwo": "string",
            "valuethree": "string"
        }
    ]

}

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

2
angular
you need to iterate over the variable TN 47 RG 7845 as that is the array, instead of an object. – ViqMontana
The variable is keep on changing. – Ganesh babu

2 Answers

4
votes

You don't need to change anything in .ts file. Change only inside the html.

Assume you have responseObj .

  <div *ngFor="let obj of responseObj | keyvalue">
        <div *ngFor="let item of obj.value">
            {{item.id}}
        </div>
    </div>
1
votes

enter image description herei solved this prob on this url

code

appUrl

please check

<div *ngFor="let obj of  tesObj ">
        <div *ngFor="let item of obj">
          {{item|json}}
        </div>
</div>

it ts File

tesObj=Array.from(Object['values'](this.originalObj))