0

I want to fetch display_name from user collection to orderList page via UID interpreter and image name from art collection in order table but got this error: https://i.stack.imgur.com/X9bkH.png

Here's a snippet of the orders collection : https://i.stack.imgur.com/X9bkH.png

and this is my code :

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import {collection, doc, getDocs, getDoc, orderBy, query,
} from "firebase/firestore";
import { db } from "../../firebase";
import { format } from "date-fns";

export default function UsersList() {
  const [ordersList, setOrdersList] = useState([]);

  const timestampToDate = (timestamp) => new Date(timestamp.seconds * 1000);

  const getOrders = async () => {
    const ordersRef = collection(db, "orders");
    const q = query(ordersRef, orderBy("timestamp", "desc"));
    const querySnapshot = await getDocs(q);
    const newData = [];
    for (const doc of querySnapshot.docs) {
      const orderData = doc.data();
      const userRef = doc(db, "users", orderData.UID.toString().toUpperCase());
      const userDoc = await getDoc(userRef);
      const userData = userDoc.data();
      const artworkRef = doc(db, "artworks", orderData.AID.toString().toUpperCase());
      const artworkDoc = await getDoc(artworkRef);
      const artworkData = artworkDoc.data();

      newData.push({
        id: doc.id,
        userDisplayName: userData?.display_name || "",
        artworkName: artworkData?.name || "",
        artworkImage: artworkData?.image || "",
        ...orderData,
      });
    }
    setOrdersList(newData);
    console.log(ordersList, newData);
  };

  useEffect(() => {
    getOrders();
  }, []);
  return (
    // data table
  );
}

Retrieving data from another collection in the existing collection that can be used for other tasks.

1 Answer 1

0

You're shadowing (overriding) the doc function by declaring it as your iteration variable.

JavaScript doesn't know the difference between the doc variable that refers to the document and the doc function to obtain a document reference.

Change this:

    for (const doc of querySnapshot.docs) {
      const orderData = doc.data();
      const userRef = doc(db, "users", orderData.UID.toString().toUpperCase());
      const userDoc = await getDoc(userRef);
      const userData = userDoc.data();
      const artworkRef = doc(db, "artworks", orderData.AID.toString().toUpperCase());
      const artworkDoc = await getDoc(artworkRef);
      const artworkData = artworkDoc.data();

      newData.push({
        id: doc.id,
        userDisplayName: userData?.display_name || "",
        artworkName: artworkData?.name || "",
        artworkImage: artworkData?.image || "",
        ...orderData,
      });
    }

to something like this:

    for (const docSnap of querySnapshot.docs) {
      const orderData = docSnap.data();
      const userDoc = await getDoc(orderData.UID);
      const userData = userDoc.data();
      const artworkDoc = await getDoc(orderData.AID);
      const artworkData = artworkDoc.data();

      newData.push({
        id: docSnap.id,
        userDisplayName: userData?.display_name || "",
        artworkName: artworkData?.name || "",
        artworkImage: artworkData?.image || "",
        ...orderData,
      });
    }
3
  • oh it works thank you very much indeed But the retrieved data is empty like this, is there a way or am I doing something wrong? This is in my console.log {id: 'vC3UC10aFy3zgI96RUGU', userDisplayName: '', artworkName: '', artworkImage: '', price: 232870, …}
    – DaggerK
    Mar 25, 2023 at 19:12
  • The UID and AID fields are references, not string values. You can use them directly without having to call doc. I'm updating my answer to reflect this
    – grimsteel
    Mar 25, 2023 at 19:22
  • @DaggerK I updated my answer. Don't forget to mark it as the solution if I was able to help
    – grimsteel
    Mar 25, 2023 at 19:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.