how to get list of product under category in vue js

user_18198067 0
Viewed 380

Hello I'm new to vue and I have a list of json data which has a list of products under category, please how do I get to display a product under each category
Here's my json data for the category array

{
    "_id": "62566ec30e42d6c5ab370e7c",
    "products": [],
    "type": "mobile phone",
    "__v": 0
}

my product array

{
    "_id": "625671db370e769a8a93a510",
    "reviews": [],
    "owner": {
        "_id": "6220db7ee861f3dbbaf21e3d",
        "name": "mr jacob",
        "about": "hello",
        "__v": 0
    },
    "category": {
        "_id": "62566ec30e42d6c5ab370e7c",
        "products": [],
        "type": "mobile phone",
        "__v": 0
    },
    "title": "galaxy s21",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ullam iusto culpa assumenda enim ea, asperiores omnis, facere quos animi doloremque, architecto facilis aut? Nobis ab sit iusto praesentium quia.",
    "photo": "https://ajibade.s3.amazonaws.com/1649832365317",
    "price": 500,
    "stockQuantity": 1,
    "__v": 0,
    "id": "625671db370e769a8a93a510"
}

my html template to get the list of category in my data base

<div class="container" v-for="category in categories" :value="category._id" :key="category._id">
      <span>{{category.type}}</span>
    </div>

my script tag

<script>
export default {
  name: "Products",
  name: "categories",
  data() {
    return {
      categoryID: null,
      categories: [],
      products: [],
     
    };
  },

 
  mounted() {
    axios.get("http://localhost:5000/api/products").then(res => {
      console.log(res);

      this.products = res.data.products;
    });
    axios.get("http://localhost:5000/api/categories").then(res => {
      console.log(res);

      this.categories = res.data.categories;
    });
  }
};
</script>

Please how do I filter the products and get it under a specific category, I'm lost

vuejs2 vuejs3 vue.js json javascript
1 Answers

You can make inner v-for of products for category, passing category._id to method:

new Vue({
  el: "#demo",
  data() {
    return {
      categoryID: null,
      categories: [],
      products: [],
      show: null
    };
  },
  methods: {
    productsForCat(cat) {
      return this.products.filter(p => p.category._id === cat)
    },
    displayProd(id) {
      this.show === id ? this.show = null : this.show = id
    }
  },
  mounted() {
    /*axios.get("http://localhost:5000/api/products").then(res => {
      console.log(res);
      this.products = res.data.products;*/
    //});
    this.products = [
          {"_id": "625671db370e769a8a93a510", "reviews": [], "owner": {"_id": "6220db7ee861f3dbbaf21e3d", "name": "mr jacob", "about": "hello", "__v": 0}, "category": {"_id": "62566ec30e42d6c5ab370e7c", "products": [], "type": "mobile phone", "__v": 0}, "title": "galaxy s21", "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ullam iusto culpa assumenda enim ea, asperiores omnis, facere quos animi doloremque, architecto facilis aut? Nobis ab sit iusto praesentium quia.", "photo": "https://ajibade.s3.amazonaws.com/1649832365317", "price": 500, "stockQuantity": 1, "__v": 0, "id": "625671db370e769a8a93a510"},
          {"_id": "625671db370e769a8a93a511", "reviews": [], "owner": {"_id": "6220db7ee861f3dbbaf21e3d", "name": "mr jacob", "about": "hello", "__v": 0}, "category": {"_id": "62566ec30e42d6c5ab370e7d", "products": [], "type": "mobile phone", "__v": 0}, "title": "galaxy", "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ullam iusto culpa assumenda enim ea, asperiores omnis, facere quos animi doloremque, architecto facilis aut? Nobis ab sit iusto praesentium quia.", "photo": "https://ajibade.s3.amazonaws.com/1649832365317", "price": 500, "stockQuantity": 1, "__v": 0, "id": "625671db370e769a8a93a510"}
        ]
    /*axios.get("http://localhost:5000/api/categories").then(res => {
      console.log(res);
      this.categories = res.data.categories;*/
    //});
    this.categories = [
        {"_id": "62566ec30e42d6c5ab370e7c", "products": [], "type": "mobile phone", "__v": 0}, {"_id": "62566ec30e42d6c5ab370e7d", "products": [], "type": "phone", "__v": 0}
      ]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div class="container" v-for="category in categories" :key="category._id">
    <span @click="displayProd(category._id)">{{category.type}}</span>
    <div v-if="category._id === show">
      <li v-for="product in productsForCat(category._id)" :key="product._id">
        {{ product.title }}
      </li>
    </div>
  </div>
</div>

user_119891890
Related