Using _.groupby() lodash with *ngFor - object error

Question

I'm using lodash to group by array:

venuesByCategory: {};

// ...

this.venuesByCategory = _.groupBy(allVenues, venue => venue.category);

In my template:

<ion-row *ngFor="let venue of venuesByCategory | keyvalue">
<!-- -->
</ion-row>

i got error:

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

what should i do? console.log of venuesByCategory:

Hello, When are you doing the following code ? this.venuesByCategory = _.groupBy(allVenues, venue => venue.category); — Soukyone, Jan 09 '20 at 16:56
Just curious, does adding braces around the pipe do any good? => `*ngFor="let venue of (venuesByCategory | keyvalue)"`. — JJWesterkamp, Jan 09 '20 at 19:18

score 0 · Accepted Answer · answered Jan 09 '20 at 17:43

0

Error explains it all.

You are trying to iterate object using *ngFor which is not supported.

Lodash groupBy returns object and not array.

Please follow below answer if you want to display object keys.

answered Jan 09 '20 at 17:43

Ashish

1 Answers1