Here I have a vue project with vite and firebase.
The function for the data call is in a separate firebase.js file with lots of functions.
I call 2 function in Orders.vue that do:
1: get all the orders based of current email adress
2: get all the products based on that order
These are the 2 function that are being called.
async function getOrders() {
const dateNow = new Date();
const year = dateNow.getFullYear();
const ordersRef = collection(
db,
"Users/" + auth.currentUser.email + "/orders/" + year + "/orders"
);
const ordersSnapshot = await getDocs(ordersRef);
let IDS = {
orders: [],
};
ordersSnapshot.forEach((doc) => {
IDS.orders.push(doc.data());
// getDoc()
// console.log(doc.data());
});
return IDS.orders;
}
async function getOrdersProducts(ids) {
// was working on this function
let products = [];
await ids.forEach((idList, inx) => {
console.log(idList);
products.push({
items: [],
order: inx,
date: idList.dateOrdered
})
// console.log(idList.productsId);
idList.productsId.forEach(async (id, index) => {
if (id.includes("monitor")) {
const productsRef = collection(db, "Products/electronics/monitors");
const q = query(productsRef, where('title', '==', id))
const productSnap = await getDocs(q)
productSnap.forEach((prod) => {
products[inx].items.push(prod.data())
})
} else if (id.includes('speaker')) {
const productsRef = collection(db, "Products/electronics/speakers");
const q = query(productsRef, where('title', '==', id))
const productSnap = await getDocs(q);
productSnap.forEach((prod) => {
console.log(prod.data());
products[inx].items.push(prod.data);
})
}
});
});
// console.log(products);
return products;
}
I call these functions inside Orders.vue which looks like this
<!-- page to get all the orders from this person -->
<script setup>
import { getAuth, onAuthStateChanged } from 'firebase/auth';
import { getOrders, getOrdersProducts } from '../../firebase'
import { onMounted, reactive, watch } from 'vue';
import { getStorage, getDownloadURL, ref } from 'firebase/storage';
const props = defineProps({
user: String || null
})
const orders = reactive({
list: []
})
const storage = getStorage()
const user = ref(false)
getOrders().then((res) => {
getOrdersProducts(res)
.then( async (finalResult) => {
console.log(finalResult);
orders.list.push(finalResult)
}).then(() => {
// get the images and assign the correct image to the correct item
console.log(orders.list[0]);
for (let y = 0; y < orders.list.length; y++) {
console.log(orders.list[0].items);
for (let i = 0; i < orders.list[y].items.length; i++) {
console.log('i = ' + i);
getDownloadURL(ref(storage, 'products/' + orders.list[y].items[i].image))
.then((url) => {
orders.list[y].items[i].image = url
}).catch((err) => {
console.log(url);
console.log(err);
})
}
}
})
.catch((err) => {
console.log(err);
})
})
.catch((err) => {
console.log(err);
})
// onMounted(() => {
// if (props.user) {
// asyncGetter()
// }
// })
// asyncGetter()
</script>
<template>
<div class="accountOrders">
<h1>orders</h1>
<!-- Was busy with rendering the order per user but did not have time for it yet -->
<p v-if="orders.list">{{ orders.list }}</p>
<div v-if="orders.list.length > 0" v-for="order in orders.list">
<p>{{ order.date }}</p>
<div v-if="order.items" v-for="product in order.items">
<p>{{ product.title }}</p>
</div>
</div>
</div>
</template>
<style lang="scss" scoped></style>
The problem is that my data does not render here:
<div v-if="orders.list.length > 0" v-for="order in orders.list">
<p>{{ order.date }}</p>
<div v-if="order.items" v-for="product in order.items">
<p>{{ product.title }}</p>
</div>
</div>
I tried to test if the second for loop was working and I found out that it doesn’t because orders.list[y].items.length returns 0
for (let i = 0; i < orders.list[y].items.length; i++) {
console.log('i = ' + i);
getDownloadURL(ref(storage, 'products/' + orders.list[y].items[i].image))
.then((url) => {
orders.list[y].items[i].image = url
console.log(url);
}).catch((err) => {
console.log(err);
})
}
p.s. I still have trouble fully understanding .then and vue proxy
