After successfully updating my orders post payment, I am wondering how I can showcase them on my Vue front end.
Below is the HTML template displaying the list of orders made:
<template>
<div>
<div
v-for="order in orders"
:key="order._id"
>
<div
v-for="product in order.products"
:key="product._id"
>
<a href="#">{{ product.productID.title }}</a>
</div>
</div>
</div>
</template>
This is the script tag being used:
<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
import axios from "axios";
export default {
name: "Products",
data() {
return {
orders: [],
name: "",
email: ""
};
},
created() {
// User not authorized
if (localStorage.getItem("token") === null) {
this.$router.push("/login");
}
},
mounted() {
const token = localStorage.getItem("token");
axios
.get("http://localhost:5000/api/orders", {
headers: {
Authorization: "Bearer" + token,
"x-access-token": token
}
})
.then(res => {
console.log(res);
orders: res.products;
});
axios
.get("http://localhost:5000/api/auth/user", {
headers: {
Authorization: "Bearer" + token,
"x-access-token": token
}
})
.then(res => {
console.log(res);
this.name = res.data.user.name;
this.email = res.data.user.email;
})
.catch(error => {
console.log(error);
});
}
};
</script>
Displayed below is the JSON object seen in the console:
[
{
"_id": "62d163b638cbafee24c6d663",
"products": [
{
"productID": {
"_id": "625672a8370e769a8a93a51e",
"reviews": [],
"owner": {
"_id": "6220db7ee861f3dbbaf21e3d",
"name": "mr jacob",
"about": "hello",
"__v": 0
},
"category": "62566ec30e42d6c5ab370e7c",
"title": "galaxy note",
"description": "Lorem ipsum dolor sit amet, ",
"photo": "https://aji.s3.eu-west-2.amazonaws.com/1649832580792",
"price": 300,
"stockQuantity": 1,
"__v": 0,
"id": "625672a8370e769a8a93a51e"
},
"quantity": 1,
"price": 300,
"_id": "62d163b638cbafee24c6d664"
}
],
"owner": {
"_id": "6278e8bc1966b7d3783ced8e",
"name": "bas",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7c7f6d5e79737f7772307d7173">[email protected]</a>",
"password": "$2a$10$3QkbA805Pn/QBYMd6sULi.FGjETYoMf44wuV1mtOZahhPzm5zeL4G",
"__v": 0,
"address": "62b2cfd8d0846785cd87c64d"
},
"estimatedDelivery": "",
"__v": 0
}
]
I'm not receiving any errors in my console, so it's difficult to pinpoint the issue.