How can I retrieve an array of collections from multiple parent documents in Firebase and pass them as props in Next.js?

I need to access all the collections within the documents stored in a collection named users.

This is how I currently retrieve all the user information:

export async function getServerSideProps() {

const snapshot = await firebase
.firestore()
.collection("users")
.orderBy("points", "desc")
.get();

let users = snapshot.docs.map((doc) => doc.data());
 
...

}

My goal is to extract the collections inside each user and store them in an array.

Firestore

I specifically want to retrieve all the "quiniela" collections from each user and pass them as props. Is there a method to achieve this?

Answer №1

To retrieve the quiniela collection from each document, you must use the .collection() method.

let users = snapshot.docs.map(async (user) => {
    let quiniela = (await user
        .collection("quiniela")
        .get())
        .map((doc) => doc.data());
    
    return {
        ...user.data(),
        quiniela,
    }
});

This will include the data from the user's quiniela collection in the result.

Please note: that users will now be an array of Promises. To access the data, use:

await Promise.all(users)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for effectively interpreting a json string

Trying to extract specific fields from a JSON string and display them on an HTML page, but encountering the following error: SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data This is the JSON being sent: { "Order0& ...

Struggling to get the findAndModify or Update functions to work properly in MongoDB. Despite fetching the desired data from my ajax call, I am unable to make any changes in the database

Here is the ajax code snippet: $(function () { $("#upvoteClick").click(function () { $.ajax({ type:"POST", data: {upvote: 2}, dataType: 'json', url:"http://localhost:9000/api/upvote" }).success(functi ...

Trouble getting search filter to function properly on an array of objects in a Vue JavaScript application

Can someone help me with integrating this code into my project? Here is the code I am referencing: http://jsfiddle.net/dkmmhf5y/701/ This snippet shows my JavaScript file, please disregard the 'test' data var app = new Vue ( { el: &apos ...

Explore a JSON array within another JSON array

Here is a JSON format that I have: { "Project [id=1, dateDebut=2017-01-13, dateFin=2017-01-18, description=qsd, sponsor=qsd ]" : [ {"id":1,"title":"qsd ","description":"qsdqsd","dateFin":"2017-01-26"}, {"id":2,"title":"sss ","descriptio ...

Encountered an error while deploying on Vercel: unable to connect to 54.178.252.149 on port 80

Here are the components in my environment: Environment Version Rails 7.0.0 Axios 0.26.1 React 18.0 Next.js 12.1.5 AWS EC2 Production Nginx Production I am attempting to deploy on Vercel for the first time. Currently, my Next.js app wo ...

Issues surrounding the determination of CSS attribute value using .css() function within a variable

I have been working on a function to change the color of a span dynamically from black to a randomly selected color from a predefined list. However, I am encountering an issue with the .css("color", variableName) part of my code and suspect that my synta ...

Provide two values and complete the third one

I have a form with three input fields. I want to fill out two of the fields and have the third field automatically filled in. Here is how it should work: - I fill out the first and second fields, and the third field calculates itself - I fill out ...

how to check if a string has white spaces in a react application

If the input string has white space, the alert will indicate unsuccessful. If the input string does not have any white space, the alert will be successful. import React from "react"; export default function DropDown() { let i = document.getEle ...

Exploring AngularJS: Understanding the Differences Between $http's Success and Then

Can someone explain the difference between these methods for me? I am curious about the distinctions between .then and .success functions, as well as .error. Thank you. // Simple GET request example: $http({ method: 'GET', url: '/some ...

Troubleshooting MongoDB aggregate lookup failure when using multiple parameters

In my data retrieval process from the comments table, everything is functioning properly. However, I am aiming to optimize performance by performing a join equivalent on the users collection to fetch additional user details associated with each comment. B ...

Establishing a client cookie will help deter any attempts at re-registering

Due to the inability to run server-side code, I am limited in implementing a PHP session for a registration form. Instead, I have opted to utilize a client cookie to ensure that each person can only register once with a unique email address. After reading ...

What is the reason behind allowing JavaScript to perform mathematical operations with a string type number?

let firstNum = 10; let secondNum = "10"; console.log(firstNum * secondNum); // Result: 100 console.log(secondNum * secondNum); // Result: 100 ...

Creating an href link within a button that is contained within a collapse component

I am grappling with an issue where my collapsed model is displaying more information about clients; however, when I click on the button inside it, instead of getting the specific client's data, I end up retrieving information for all clients. <ion ...

The ssh2 module experiences a quiet failure when provided with credentials that are successful when used from

After successfully connecting to Google Cloud Compute using the CLI with a command like this: ssh -i ~/.ssh/my-ssh-key me@ipnumber I have encountered a problem where the ssh2 module is not providing any output or errors. var fs = require('fs') ...

Next auth does not provide authentication functionality for Firebase

I've implemented next-auth with a firebase adapter, and while everything seems to be functioning properly in terms of saving users in the database, I'm encountering some issues with authentication. import NextAuth from "next-auth" impo ...

Tips for clicking a .class a random number of times:

Could someone help me figure out how to click a random number of times on the element with class name .CLASS when a key is pressed? I think I need to incorporate the Math.floor(Math.random()) function, but I'm not sure how to do it in my existing code ...

Having issues with CSS animation keyframes not functioning properly in NextJS

Currently, I have a straightforward component in NextJS that is displaying "HI" upon loading. This component fades in when rendered, but I am facing an issue while trying to pass a prop to make it fade out. The problem lies in the fact that even though the ...

Are there any methods to implement object-oriented programming in JavaScript?

The concept of prototype-based object-oriented programming in JavaScript is intriguing, but there are many scenarios where the need for class-based object creation arises. Consider a vector drawing application, where the workspace begins empty and you can ...

Unable to modify the filename of the uploaded file with multer

I've been attempting to modify the name of the image I'm uploading to the server using multer. However, even after utilizing the multer.diskStorage method as per the documentation, the file continues to be saved with random names. MY CODE: con ...

Avoid page refreshing when retrieving data using PHP and AJAX

In my current program, I am able to add data and insert it into the database. However, I am looking for a way to automatically send this data to another page or browser without refreshing. I have two browsers open, so how can I submit the data to the other ...