How to implement the fetching of data for different categories of products to be shown in a home page using firebase on a Reactjs project

user_11375002 0
Viewed 47

I want to get the products across different categories to be shown on the home page. The below code only fetches data from a single category. How do I go about fetching products from multiple categories. Should I use promises ? I feel like there will be a lot of redundant code. Is there a better way?

fetchProducts = async ( category )=>{
    let productsRef = projectFirestore.collection("products");
    let query = productsRef;

      query = productsRef.where('category', '==', 'Beverage');
      query.get().then((querySnapshot) => {
        let products = [];
        querySnapshot.forEach((doc) => {
            // doc.data() is never undefined for query doc snapshots
            products.push({
              name  : doc.data().name,
              price : doc.data().price,
              prev_price : doc.data().prev_price,
              discount : doc.data().product_discount,
              id    : doc.id, 
              src   : doc.data().pictures[0].src,
              rating: doc.data().rating
            });
        });
  
        this.setState(() => {
          return { products };
        }, this.checkCartItems);
      })
firebase reactjs
1 Answers

Edit: Here's the correct solution: docs - https://firebase.google.com/docs/firestore/query-data/queries#in_not-in_and_array-contains-any

fetchProducts = async (categories) => {
  let productsRef = projectFirestore.collection("products");
  let query = productsRef.where('category', 'in', categories);

  query.get().then((querySnapshot) => {
    let products = [];
    querySnapshot.forEach((doc) => {
      // doc.data() is never undefined for query doc snapshots
      products.push({
        name: doc.data().name,
        price: doc.data().price,
        prev_price: doc.data().prev_price,
        discount: doc.data().product_discount,
        id: doc.id,
        src: doc.data().pictures[0].src,
        rating: doc.data().rating,
      });
    });

    this.setState(() => {
      return { products };
    }, this.checkCartItems);
  })
  .catch(err => console.log(err));
};
user_106062030
Related