Vue: Retrieve firestore data to show user's business name v-for loop

Question

In my project, I am working on the result page of the e-commerce.

I want to retrieve the data from two collections. One is called "Product", and the other one is called "ProUser".

Now, I could retrieve and show the product info from "Product" collection. I used v-for loop to show the each item's information.

I also want to retrieve shop name in "ProUser" collection of each user at the same time. I set the shop name in "business" field.

Product collection is corresponding to uid.

In my dev console, I could confirm I could retrieve all the data from "ProUser" collection.

Following is my vue.js code.

Now in my browser, I cannot show the shop name of each user.

<template>
    <div class="main">
      <section class="cards">
        <div class="card-list" v-for="(item, index) in getMenuItems" :key="index">
          <div class="card" >
          <div class="product-list" v-if="item.quantity > 0">
            <div class="quantity">
                <span>{{ item.quantity }}</span>
            </div>
            <div class="card__image-container" v-for="(sample, index) in item.sample" :key="index">
              <router-link to="/product">
              <img
                :src="sample"
                alt="Detailed image description would go here."
                class="image"
              />
              </router-link>
              <!-- Retrieve business name from the ProUser collection. -->
              <div class="card__content"  v-for="(item, index) in ProUsers" :key="index">
                  <div class="card__info">
                      <span class="text--medium">{{ item.business }}</span>
                      <span class="card__distance text--medium"> product.quantity -- orders </span>
                  </div>
              </div>
            </div>
          <div class="icons">
            <div class="time">
              <span>{{ item.limitObject }}</span>
             </div>
              <div class="fav">
              <span>Heart</span>
             </div>
              <div class="price">
              <span>{{ item.sale }}</span>
             </div>
          </div>
          </div>
        </div>
        </div>

      </section>
    </div>
    </div>
    </div>
    
</template>

<script>
import axios from 'axios';
import fireApp from '@/plugins/firebase'
const firebase = require("firebase");
require("firebase/firestore");
const db = firebase.firestore();
import googleMapMixin from '@/mixins/googleMapMixin'
import { mapGetters } from 'vuex'


    export default {
        name: "UserLocation",
        data() {
            return {
                address: "",
                error: "",
                spinner: false,
                ProUsers: []
            }
        },
        mixins: [googleMapMixin],
        created() {
          //vuexfire
          const dbMenuRef = db.collection('Product')
          this.$store.dispatch('setMenuRef', dbMenuRef)

          //firestore
          db.collection("ProUser")
          .get()
          .then((querySnapshot)=> {
              querySnapshot.forEach((doc) => {
                  console.log(doc.id, " => ", doc.data());
                  this.ProUsers.push(doc.data())
              });
          })
          .catch((error) => {
              console.log("Error getting documents: ", error);
          });
        },        
        computed: {
            ...mapGetters([
                'getMenuItems'
            ])
        },
        methods: {
          
        }
    }
</script>

The problem now is, I could see all the shop name in <div class="card__info> tag.

What I want to achieve is to show one shop name of each user in here.

<!-- Retrieve business name from the ProUser collection. -->
                  <div class="card__content"  v-for="(item, index) in ProUsers" :key="index">
                      <div class="card__info">
                          <span class="text--medium">{{ item.business }}</span>
                          <span class="card__distance text--medium"> product.quantity -- orders </span>
                      </div>
                  </div>
                </div>

Not showing all the shop name.

My question is In other words, I want to fetch the product and the product owner. Now in one tag, I could show one product with all the product owners in "ProUser" collection.

Hope someone helps me out.

If you need more information, please feel free to ask.

Answer 1

Here's how you can fetch data user from prouser collection and after then fetch the product related to the prouser and create a new object from data from both collection data.

  let data = [];
  let db = firebase.firestore();
  db.collection("ProUser")
    .get()
    .then((userSnapshot) => {
      db.collection("Product")
        .get()
        .then((productSnapshot) => {
          userSnapshot.forEach((user) => {
            productSnapshot.forEach((product) => {
              if (user.id === product.id) {
                data.push({
                  uid: user.id,
                  pId: product.id,
                  ...user.data(),
                  ...product.data(),
                });
              }
            });
          });
        })
        .catch((e) => {
          console.log(e);
        });
    })
    .catch((e) => {
      console.log(e);
    });