[FIXED] how to display list of orders from my database in vue js

Issue

i've successfully updated my orders after payment please how can i display it in my vue front end

this is my html template which shows 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 my script tag

<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
import axios from "axios";

export default {
  name: "Products",
  data() {
    return {
      orders: [],
      name: "",
      email: ""
    };
  },
  created() {
    //user is 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>

this the json object i get in my 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": "bas@gmail.com",
            "password": "$2a$10$3QkbA805Pn/QBYMd6sULi.FGjETYoMf44wuV1mtOZahhPzm5zeL4G",
            "__v": 0,
            "address": "62b2cfd8d0846785cd87c64d"
        },
        "estimatedDelivery": "",
        "__v": 0
    }
]

i'm not getting any error in my console so i don't seem to know where the problem is

Solution

this.orders = res.data.products was what solved my problem

Answered By - jibzy

Answer Checked By - Pedro (PHPFixing Volunteer)