how to display list of orders from my database in vue js-CodePudding

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": "[email protected]",
            "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

CodePudding user response：

Your code looks fine to me and it is working fine. One small observation, As per the console data you posted, It should be this.orders = res instead of orders = res.products.

Live Demo :

new Vue({
  el: '#app',
  data: {
    orders: []
  },
  mounted() {
    const apiResponse = [
      {
        "_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": "[email protected]",
          "password": "$2a$10$3QkbA805Pn/QBYMd6sULi.FGjETYoMf44wuV1mtOZahhPzm5zeL4G",
          "__v": 0,
          "address": "62b2cfd8d0846785cd87c64d"
        },
        "estimatedDelivery": "",
        "__v": 0
      }
    ];
    this.orders = apiResponse;
  }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <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>

CodePudding user response：

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