Can someone help me with looping through data fetched from an API using a GET request in Vue.js?
This is the sample response obtained:
"data": {
"Orders": [
{
"OrderID": 1,
"Ordered_Products": {
"items": [
{
"id": 2,
"title": "Hildegard Prohaska",
"quantity": 5,
},
{
"id": 3,
"title": "Odell Zieme",
"quantity": 3,
}
]
},
"Pay_method": 1,
//stuff
},
{
"OrderID": 1,
"Ordered_Products": {
"items": [
{
"id": 2,
"title": "Hildegard Prohaska",
"quantity": 2,
},
{
"id": 3,
"title": "Odell Zieme",
"quantity": 1,
}
]
},
"Pay_method": 2,
//stuff
}
]
}
Below is the fetch operation I'm using:
methods: {
fetchOrders () {
fetch('https://myapidomine.com')
.then(res => res.json())
.then(res => {
this.orders = res.data.Orders
})
}
}
And here's how I'm implementing it:
<v-card flat v-for="order in orders" :key="order.OrderID">
<v-layout row wrap">
<v-flex xs12 md4>
<div class="caption grey--text">PayMethod</div>
<div>{{ order.Pay_method }}</div>
</v-flex>
I can access keys inside Orders, like {{order.Pay_method}}, without any issues. However, I'm struggling to loop through items within Ordered_Products.items and retrieve details such as title.
If I try:
<v-list-item-title xs12 md3>{{order.Ordered_Products.items[0].title}}
I can only get data for the first product. Can anyone guide me on how to properly loop through this data?
Thank you in advance! (I'm still new to Vue)