Loop into observable array containing objects

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": "customer@test.be",
            "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": "customer@test.be",
            "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[]>;

Answer 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 !

Answer 2

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