• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

418
Views
how to get list of product under category in vue js

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

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error