I'm working on an app in which if a category is clicked it goes to another route and list the product under that category.

This is my html template category id routes :

 <div>

    <p>{{category.type}}</p>

    <div
      v-for="product in products(category._id)"
      :key="product._id"
    >
      {{product.title}}
    </div>
  </div>

My script tag :

<script>

import axios from "axios";
export default {
  name: "Product",
  components: {},
  data() {
    return {
      categoryID: null,
      category: [],
      products: [],
      show: null
    };
  },
  mounted() {
    axios
      .get(`http://localhost:5000/api/categories/${this.$route.params.id}`, {})
      .then(response => {
        console.log(response);
        this.category = response.data.category;
      })
      .catch(error => {
        console.log(error);
        error;
      });

    axios
      .get(`http://localhost:5000/api/products`, {})
      .then(response => {
        console.log(response);
        this.product = response.data.product;
      })
      .catch(error => {
        error;
      });
  },

 
};
</script>

Response I get in my console, the list of categories :

{
    "success": true,
    "category": {
        "_id": "6220db08e861f3dbbaf21e39",
        "products": [],
        "type": "3 bedroom",
        "__v": 0
    }
}

This is my list of products :

{
    "products": [
        {
            "_id": "6256711a0e42d6c5ab370e9d",
            "category": {
                "_id": "6220db08e861f3dbbaf21e39",
                "products": [],
                "type": "3 bedroom",
                "__v": 0
            },
            "title": "galaxy s22",
            "price": 200,
            "stockQuantity": 1,
            "__v": 0,
            "id": "6256711a0e42d6c5ab370e9d"
        },        
    ]
}

my category api

router.get(`/categories/:id`, async (req, res) => {
    try {
        let category = await Category.findOne({
          _id: req.params.id
        })
    
        res.json({
          success: true,
          category: category
        });
      } catch (err) {
        res.status(500).json({
          success: false,
          message: err.message
        });
      }
  });

How can I get the list of products under a specific category ? I get the {{ category.type }}

CodePudding user response：

My suggestion is to filtered out the products in the script and then bind that in the template as you are getting only one category object from an API.

Demo :

new Vue({
  el: '#app',
  data: {
    // This is a mock data just for a demo (actual will come from API)
    category: {
      "success": true,
      "category": {
        "_id": "6220db08e861f3dbbaf21e39",
        "products": [],
        "type": "3 bedroom",
        "__v": 0
      }
    },
    // This is a mock data just for a demo (actual will come from API)
    products: [
      {
        "category": {
          "_id": "6220db08e861f3dbbaf21e39"
        },
        "title": "galaxy s22"
      },  {
            "category": {
                "_id": "6220db08e861f3dbbaf21e40"
            },
            "title": "galaxy s10"
        },        {
            "category": {
                "_id": "6220db08e861f3dbbaf21e39"
            },
            "title": "galaxy s30"
        }      
    ]
  },
  mounted() {
    this.products = this.products.filter(({ category }) => category._id === this.category.category._id);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p>{{category.category.type}}</p>
  <ul>
    <li v-for="product in products" :key="product._id">
      {{ product.title }}
    </li>
  </ul>
</div>

CodePudding user response：

To get the products for a category you can filter your products :

let categoryProducts = this.products.filter((p) => {
   return p.category.type == this.category.type
})

But perhaps its better to only retrive products of that category from the server, without filtering on js, if you don't need the products of other categories

i don't know your api but something like that perhaps :

axios.get(`http://localhost:5000/api/products?category=`   this.category.id, {})
     .then(response => {
       console.log(response);
       this.product = response.data.product;
     })
     .catch(error => {
       error;
     });

CodePudding user response：

     mounted() {
            axios
              .get(`http://localhost:5000/api/categories/${this.$route.params.id}`)
              .then(response => {
               
                this.category = response.data.category;    
                })
              .catch(error => {
                console.log(error);
                
              });
        }

By above api you will get category object which have products. so you don't need any other api. so now just loop using category.products.

<div
      v-for="product in category.products"
      :key="product._id"
    >
      {{product.title}}
    </div>