Difficulty Creating UI tables using *ngFor


#1

I am trying to crate something that looks like this
h

for all orders returned from my API.
Data returned from API is structured like

[
[
{
“orderid”: “171017MUK121018”,
“storename”: “makerere”,
“storeid”: 4,
“items”: [
{
“productname”: “white washing soap”,
“product_id”: 3,
“amount”: 180000,
“units”: 12
},
{
“productname”: “5 liter cooking oil”,
“product_id”: 4,
“amount”: 120000,
“units”: 8
}
]
},
{
“orderid”: “171017MUK121018”,
“storename”: “makerere”,
“storeid”: 4,
“items”: [
{
“productname”: “5 liter cooking oil”,
“product_id”: 4,
“amount”: 120000,
“units”: 8
}
]
},
{
“orderid”: “171017MUK121049”,
“storename”: “makerere”,
“storeid”: 4,
“items”: [
{
“productname”: “white washing soap”,
“product_id”: 3,
“amount”: 150000,
“units”: 10
},
{
“productname”: “5 liter cooking oil”,
“product_id”: 4,
“amount”: 150000,
“units”: 10
}
]
},
{
“orderid”: “171017MUK121049”,
“storename”: “makerere”,
“storeid”: 4,
“items”: [
{
“productname”: “5 liter cooking oil”,
“product_id”: 4,
“amount”: 150000,
“units”: 10
}
]
},
{
“orderid”: “171018MUK091059”,
“storename”: “makerere”,
“storeid”: 4,
“items”: [
{
“productname”: “white washing soap”,
“product_id”: 3,
“amount”: 570000,
“units”: 38
},
{
“productname”: “5 liter cooking oil”,
“product_id”: 4,
“amount”: 420000,
“units”: 28
}
]
},
{
“orderid”: “171018MUK091059”,
“storename”: “makerere”,
“storeid”: 4,
“items”: [
{
“productname”: “5 liter cooking oil”,
“product_id”: 4,
“amount”: 420000,
“units”: 28
}
]
}
]
]

Please help out.