Loop into observable array containing objects Error: Cannot find a differ supporting object '[object Object]'

Question

I know the subject has often been treated on StackOverflow but I don't find the answer to my problem in previous posts.

I tried this kind of solution but no results. here or here... and many others. I'm not able to adapt them to my own problem.

Here is the problem: My web API returns this kind of structure: (Array containing objects containing array)

[
    {
        "userAccountId": 11,
        "orderStatusId": 1,
        "truckId": 2,
        "dateIn": "2021-10-14T18:40:04.6232598",
        "dateOut": "2021-10-14T18:40:04.6232621",
        "orderDetails": [
            {
                "orderId": 1,
                "truckMenuId": 1,
                "truckMenu": {
                    "truckId": 2,
                    "foodCategoryId": 5,
                    "foodCategory": null,
                    "title": "Spiedirosso - Campagna Naples",
                    "ingredients": "Vin rouge",
                    "image": "",
                    "price": 4.5,
                    "truck": null,
                    "description": "Vin rouge au verre",
                    "shortDescription": "Spiedirosso - Campagna Naples",
                    "id": 1,
                    "guid": "c637d764-979a-4ffc-9c61-b40090c47cbf",
                    "isDeleted": false
                },
                "quantity": 1,
                "id": 2,
                "guid": "00000000-0000-0000-0000-000000000000",
                "isDeleted": false
            },
            {
                "orderId": 1,
                "truckMenuId": 3,
                "truckMenu": {
                    "truckId": 2,
                    "foodCategoryId": 4,
                    "foodCategory": null,
                    "title": "Sabayon au marsala",
                    "ingredients": "Jaune d'oeuf, sucre en poudre, vin blanc",
                    "image": "",
                    "price": 8.5,
                    "truck": null,
                    "description": "le délicieux sabayon fait maison",
                    "shortDescription": "Sabayaon",
                    "id": 3,
                    "guid": "685d2e54-4130-4c30-9506-f8ed06008b40",
                    "isDeleted": false
                },
                "quantity": 1,
                "id": 1,
                "guid": "00000000-0000-0000-0000-000000000000",
                "isDeleted": false
            }
        ],
        "userAccount": {
            "userAccountTypeId": 5,
            "genderId": 1,
            "truckId": null,
            "lastName": "Customer",
            "firstName": "Customer",
            "userName": "customer",
            "mail": "[email protected]",
            "login": "Customer",
            "password": "91ec1f9324753048c0096d036a694f86",
            "id": 11,
            "guid": "7ce77262-7eb6-459b-94d1-3384856c39d2",
            "createdBy": "System User",
            "createdOn": "2021-10-14T18:39:35.8390302",
            "lastModifiedBy": "System User",
            "lastModifiedOn": "2021-10-14T18:39:35.8390313",
            "isDeleted": false
        },
        "id": 1,
        "guid": "00000000-0000-0000-0000-000000000000",
        "isDeleted": false
    },
    {
        "userAccountId": 11,
        "orderStatusId": 1,
        "truckId": 2,
        "dateIn": "2021-10-15T14:59:07.4481334",
        "dateOut": "2021-10-15T14:59:07.4481346",
        "orderDetails": [
            {
                "orderId": 2,
                "truckMenuId": 1,
                "truckMenu": {
                    "truckId": 2,
                    "foodCategoryId": 5,
                    "foodCategory": null,
                    "title": "Spiedirosso - Campagna Naples",
                    "ingredients": "Vin rouge",
                    "image": "",
                    "price": 4.5,
                    "truck": null,
                    "description": "Vin rouge au verre",
                    "shortDescription": "Spiedirosso - Campagna Naples",
                    "id": 1,
                    "guid": "c637d764-979a-4ffc-9c61-b40090c47cbf",
                    "isDeleted": false
                },
                "quantity": 1,
                "id": 5,
                "guid": "00000000-0000-0000-0000-000000000000",
                "isDeleted": false
            },
            {
                "orderId": 2,
                "truckMenuId": 3,
                "truckMenu": {
                    "truckId": 2,
                    "foodCategoryId": 4,
                    "foodCategory": null,
                    "title": "Sabayon au marsala",
                    "ingredients": "Jaune d'oeuf, sucre en poudre, vin blanc",
                    "image": "",
                    "price": 8.5,
                    "truck": null,
                    "description": "le délicieux sabayon fait maison",
                    "shortDescription": "Sabayaon",
                    "id": 3,
                    "guid": "685d2e54-4130-4c30-9506-f8ed06008b40",
                    "isDeleted": false
                },
                "quantity": 1,
                "id": 4,
                "guid": "00000000-0000-0000-0000-000000000000",
                "isDeleted": false
            },
            {
                "orderId": 2,
                "truckMenuId": 4,
                "truckMenu": {
                    "truckId": 2,
                    "foodCategoryId": 4,
                    "foodCategory": null,
                    "title": "Il classico Tiramisu",
                    "ingredients": "Biscuit boudoirs, Mascarpone, oeufs, sucre, café, rhum, cacao en poudre",
                    "image": "",
                    "price": 9.5,
                    "truck": null,
                    "description": "Un classic, le délicieux tiramissu maison",
                    "shortDescription": "Tiramissu",
                    "id": 4,
                    "guid": "d24f78f9-a225-469c-b94a-31d96909ea15",
                    "isDeleted": false
                },
                "quantity": 1,
                "id": 3,
                "guid": "00000000-0000-0000-0000-000000000000",
                "isDeleted": false
            }
        ],
        "userAccount": {
            "userAccountTypeId": 5,
            "genderId": 1,
            "truckId": null,
            "lastName": "Customer",
            "firstName": "Customer",
            "userName": "customer",
            "mail": "[email protected]",
            "login": "Customer",
            "password": "91ec1f9324753048c0096d036a694f86",
            "id": 11,
            "guid": "7ce77262-7eb6-459b-94d1-3384856c39d2",
            "createdBy": "System User",
            "createdOn": "2021-10-14T18:39:35.8390302",
            "lastModifiedBy": "System User",
            "lastModifiedOn": "2021-10-14T18:39:35.8390313",
            "isDeleted": false
        },
        "id": 2,
        "guid": "00000000-0000-0000-0000-000000000000",
        "isDeleted": false
    }
]

My TruckComment model is:

export interface TruckComment {
    id         : number;
    userAccount: UserAccount;
    truckId    : number;
    comment    : string;
    date       : Date;
}

Data comes from an observable.

In the html part I try to display this datas like this:

<ng-container *ngIf="(OrderFromService$ | async) as Order">
   <h3 class="color-secondary col-md-6"></h3>
   <tr *ngFor="let order of Order">
      <td>{{order.dateIn | date: 'yyyy-MM-dd HH:mm'}}</td>
      <td>{{order.dateIn | date: 'yyyy-MM-dd HH:mm'}}</td>
      <td>{{order.orderDetails?.truckMenu?.title}}</td>
      <td>{{order.userAccount?.lastName}}</td>
      <td>{{order.orderDetails?.truckMenu?.title}}</td>
      <td></td>
      <td></td>
   </tr>
</ng-container>

but I get this error message in the browser console:

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

I also tried with keyvalue but nothing changes.

Can somebody help me to see where is the problem? Thanks

Edit: my observable is defined like this public orders$ : Observable<Order[]>;

here ` <td>{{order.orderDetails?.truckMenu?.title}}</td>` orderDetails is also an array & you can not read the truckMenu directly on orderDetails key. — abhishek sahu
– abhishek sahu, Commented Oct 16, 2021 at 10:38
please try <tr *ngFor="let order of OrderFromService$ | async"> this as well. — abhishek sahu
– abhishek sahu, Commented Oct 16, 2021 at 10:44
I'm not sure that's the problem because data displayed like this ´<td>{{order.orderDetails?.truckMenu?.title}}</td> appears corectly on web page. I think the problem is due from the ` <tr *ngFor="let order of (OrderFromService$ | async)">`. If I delete it no more error message. — Paintbox
– Paintbox, Commented Oct 16, 2021 at 10:47
I also tried the solution with <tr *ngFor="let order of (OrderFromService$ | async)"> but nothing changes. — Paintbox
– Paintbox, Commented Oct 16, 2021 at 10:50
*ngFor="let order of orders$ | async" should be like this. — abhishek sahu
– abhishek sahu, Commented Oct 16, 2021 at 10:51

pauljosephatay · Accepted Answer · 2021-10-16 11:57:09Z

1

seems you already got the answer but will just leave a stackblitz here:

https://stackblitz.com/edit/angular-dyphl4

in general you would want a flatten/normalized list of items but that would be a different story. here's a good read from Vamsi Vempati

https://medium.com/angular-in-depth/the-benefits-of-application-state-normalization-in-angular-f93392ca9f44

answered Oct 16, 2021 at 11:57

pauljosephatay

1314 bronze badges

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

Comments

Paintbox · Accepted Answer · 2021-10-17 14:29:27Z

1

I found the solution thanks to you abhishek!

Indeed orderDetails is an array but in my model its a simple object.

I changed it to an array in the model :

export interface Order {
    id?          : number;
    truckId      : number;
    userAccountId: number;
    orderStatusId: number;
    dateIn?      : Date;
    dateOut?     : Date;
    orderDetails?: OrderDetails[];
    userAccount? : UserAccount;
    truckMenu?   : TruckMenu;
}

and in the html part I do this :

<td>
    <span *ngFor="let d of (order.orderDetails)">{{d.truckMenu?.title}}</span>
</td>

Thank you for your help @abhishek sahu !

Edit: After searching a lot, I also found the response to the Error Message : Cannot find a differ supporting object [object Object] (see below).

Through this post.

In my service I changed this:

private _comments: BehaviorSubject<TruckComment[]> = new BehaviorSubject({} as TruckComment[]);

By this one :

private _comments: BehaviorSubject<TruckComment[]> = new BehaviorSubject([] as TruckComment[]);

this { } by this [ ]

Hope this can help someone else.

edited Oct 17, 2021 at 14:29

answered Oct 16, 2021 at 11:24

Paintbox

4076 silver badges15 bronze badges

4 Comments

abhishek sahu Over a year ago

wc @Paintbox !!!

Paintbox Over a year ago

The problem is half resolved because error message is always present. How to desapear it?

abhishek sahu Over a year ago

Try to restart angular server.

Paintbox Over a year ago

I did it but nothing changed.

Collectives™ on Stack Overflow

Loop into observable array containing objects Error: Cannot find a differ supporting object '[object Object]'

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related