Hi i am new to angular i have doubt on print nested data within nested data from web api to angularmaterial table..

my data like :

    {
    "Code": "1",
    "Data": {
    "id": 1,
    "userId": 1,
    "orderDetails": [
        {
           
            "medicineId": 1,
             "medicine": {
                "medicineName": "Paracetomol"
            }
        },
        {
             
            "medicineId": 2,
             "medicine": {
                "medicineName": "vicsaction"
            }
        }
    ]
}

}

here i want to print medicineName names in loop...i want to print two rows depoends on orderdetails

this is my html:

       <ng-container matColumnDef="medicineName"> 
            <th mat-header-cell *matHeaderCellDef > Medicine </th>
            <td mat-cell *matCellDef="let row"> {{row.orderDetails.medicine.medicineName}} </td>
          </ng-container>

it shows error like "Provided data source did not match an array, Observable, or DataSource"

how to fix this error

CodePudding user response：

The dataSource supplied to the mat-table is not an array because of which you see that error.

Since your orderDetails array is in the data object, You need to pass data.orderDetails to table as dataSource.

After that you can get medicineName by passing row.medicine.medicineName.

   <ng-container matColumnDef="medicineName"> 
        <th mat-header-cell *matHeaderCellDef > Medicine </th>
        <td mat-cell *matCellDef="let row"> 
       {{row.medicine.medicineName}} </td>
      </ng-container>