Is it possible for me to nest a Firebase collection within another collection?

When gathering user information and favorite foods in a form, I'd like the favorite food data to be nested under the 'users' collection as Likes:

const sendPosts = (e) => {

    e.preventDefault()
    db.collection("users").add({
    
    //here I add the user details
    name: "userName",
    lastName: "userLastName",
    
    //can I also add a sub-collection like this after "lastName"
    
    collection("favFood").add({
    favDrink: "userDrink",
    favDessert: "userDesert",
      })
    })
  }

Is it possible to achieve this structure, or is there a more straightforward way?

Answer №1

Achieving this is definitely possible, as the add() method in Firebase returns the DocumentReference of the newly created document.

db.collection("users").add({
    name: "userName",
    lastName: "userLastName"
})
.then(userDocRef => {
    userDocRef.collection("favFood").add({
        favDrink: "userDrink",
        favDessert: "userDesert",
    });
});

The code userDocRef.collection("favFood") establishes the CollectionReference for the favFood subcollection within the newly created user document. For more information, refer to the documentation here.

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

Are there any JavaScript libraries available that can mimic SQLite using localStorage?

My current application makes use of SQLite for storage, but I am looking to switch it up to make it compatible with Firefox and other browsers. I've been considering localStorage as an option. However, I've noticed that localStorage lacks some o ...

The getElementById function can only select one option at a time and cannot select multiple options

I'm having an issue with a JavaScript function that is supposed to allow me to select multiple options, but it's only selecting the first one. Here is the JavaScript code: function index(){ var a="${staffindex}".replace("[",""); ...

"Enhancing Error Handling in Express with Node.js Middleware for Parsing

I've been working on developing a middleware to manage errors, but I'm struggling to send the correct format to my frontend. Below, I'll outline my various attempts in the hopes of getting some guidance on this issue. Attempt 1 app.use(fun ...

Tips for importing all global Vue components in a single file

I currently have a large Vuejs application where I imported all my components globally in the app.js file. While it's functioning well, I believe reorganizing the component imports into a separate file would improve the overall structure of the projec ...

Improprove jQuery code to eliminate redundancy

Is there a better way to improve the appearance of this code? Here is a condensed snippet of the HTML: <div id="template" style="display:none;"> <div style="position:relative;"> <fieldset> <img class="sm_kont" ...

Arrangement of Bootstrap card components

Each card contains dynamic content fetched from the backend. <div *ngFor="let cardData of dataArray"> <div class="card-header"> <div [innerHtml]="cardData.headerContent"></div> </div> <d ...

Is there a way in JavaScript to convert comma-separated values into an array?

I currently have a code that makes combo boxes hide or show, but I am concerned about what will happen if I add more categories. If I do add more categories, I would have to modify the code each time. My goal is to have a variable that can hold multiple v ...

The hover effect generates a flickering sensation

I am having trouble displaying options on an image when hovering over it, as the displayed options keep flickering. $('a').hover(function(event) { var href = $(this).attr('href'); var top = $(this).next().css("bot ...

Display <div> exclusively when in @media print mode or when the user presses Ctrl+P

Looking for a way to create an HTML division using the div element that is only visible when the print function is used (Ctrl+P) and not visible in the regular page view. Unfortunately, I attempted the following method without success. Any advice or solut ...

Is it possible to utilize a JS script generated within the body or head of an HTML file directly within CSS code?

As a beginner in webpage development, I have a query regarding the technical aspect. Is it possible to utilize variables from a JavaScript function, which is placed either in the head or body of an HTML file, directly in CSS code to make modifications such ...

When decoding a JWT, it may return the value of "[object Object]"

Having some trouble decoding a JSON web token that's being sent to my REST API server. I can't seem to access the _id property within the web token. Below is the code I'm currently using: jwt.verify(token, process.env.TOKEN_SECRET, { comp ...

Tips for effectively utilizing an if/else structure to animate fresh content from the right while smoothly removing old content by sliding it to the left

document.getElementById("button1").addEventListener("click", mouseOver1); function mouseOver1(){ document.getElementById("button1").style.color = "red"; } document.getElementById("button2").addEventListener("click", mouseOver); function mous ...

What is the best way to deliver an HTTP request from the controller to my Ajax function?

Is there a way to send HTTP OK and error responses from the controller to my AJAX request? For example, using HttpStatusCode.OK and HttpStatusCode.BadRequest. When I inspect in my browser it shows impresion.js 304 not modified. $(document).ready(functi ...

Having multiple Angular two applications running simultaneously within a single webpage

I have encountered an issue while trying to display two separate Calendars on a single page. The first Calendar loads successfully, but the second one does not load at all. There seems to be no attempt made to load it. As I am relatively new to Angular, I ...

Client component in Next.js is automatically updated upon successful login

I am currently working on a Next.js + DRF website that requires authentication. I have set up my navbar to display either a "log in" or "log out" button based on a boolean prop passed from the server side to the client-side: export default async function R ...

Assign a JavaScript variable upon clicking a polygon on Mapbox

I have a MapBox map that consists of approximately 800 polygons representing census tracts, created using TileMill. The map has been integrated into an HTML page alongside a D3.js chart. A drop-down menu on the page allows users to select one of the 800 ce ...

When executing `npm run start`, a blank page appears exclusively on the server

I recently set up a Vue landing page on my Mac. In the terminal, I navigated to the folder and executed "npm install" and "npm run dev", which ran without any issues. However, when trying to do the same on a managed server, I encountered challenges with t ...

How can I trigger a masterpage function from a contentpage in asp.net?

I am trying to call a function on the masterpage from a content page in the codebehind. Here is my attempt: ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alert__", string.Format("setStatusBarMessage('{0}',{1});", barMessage, ty ...

Using Typescript to pass inferred type to React's useCallback

Illustration: function useFunction(fn) { return fn; } type Data = { '/person': { person: any }, '/place': { place: any }, }; function useData<Path extends keyof Data>( path: Path, options: { callback?: (data: Data[ ...

Execute --runTestsByPath on two or more distinct paths

Currently, I am utilizing the jest cli for running my tests. Jest offers a useful cli option known as --runTestsByPath, which allows me to specify the locations of my tests. Despite having unit tests spread out in various directories within my repository, ...