Removing nested references in Firestore

Currently, I am facing an issue with deleting a 2 levels deep nested Reference in Firestore. Here is how my Schema is structured:

https://i.sstatic.net/INR0l.png

In terms of code, it appears as follows:

{
    "folder": "bla",
    "title": "myTitle",
    "children": [
        {
            "ref": "firstReference"
        },
        {
            "ref": "secondReference"
        },
        {
            "title": "Subcollection Title",
            "children": [
                {
                    "ref": "thirdReference"
                },
                {
                    "ref": "forthReference"
                }
            ]
        }
    ]
}

My current challenge is figuring out how to remove the third or forth Reference from the second children array.

To remove an item from the first children array, I use this line of code:

docRef.update({children: firebase.firestore.FieldValue.arrayRemove(folder.children[index])

However, this solution only works for the top level.

Is there anyone familiar with handling the removal of deeper Nested elements?

I have attempted the following:

docRef.update({[`children[${index}].children`]: firebase.firestore.FieldValue.arrayRemove(
                    folder.children[index].children[secondIndex])});

Unfortunately, I encountered an Error stating that Paths must not contain '~', '*', '/', '[', or ']'

Thank you in advance for any assistance provided ;)

Answer №1

Unfortunately, Firestore does not offer support for directly modifying array items using their index value. The FieldValue.arrayRemove method can only be used when providing the specific content to eliminate from an array field. In cases where you are only aware of the index position, the workaround involves retrieving the document, making modifications to the array in memory, and subsequently updating the document with the updated array contents.

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

Adding a component dynamically with a link click in Angular: A step-by-step guide

I am encountering an issue with my web application setup. I have a navigation bar, a home page with left and right divs, and a view-associates component. My goal is to dynamically add the view-associates component into the home's right div when a spec ...

Issues arise with Vue.js's declarative rendering functionality after the bundling process with webpack

Here is a snippet from my index.html file: <!doctype html> <html><head> <body> <h1>ES</h1> <div id="app"> {{ message }} </div> <script src="dist/main.js" type="text/javascri ...

Having trouble accessing the value of an item in a dropdown box on a website

I am currently developing a webpage using HTML5 and Knockout Js. I am facing an issue where I am unable to retrieve the ID of the selected item from a dropdown box in order to insert a value into an SQL table. As an example, consider the following SQL tab ...

Error: It seems that the window object is not defined when trying to run Firebase analytics

Encountering the error ReferenceError: window is not defined when attempting to set up Firebase analytics in my Next.js project. Below is the code snippet causing the issue: const app = initializeApp(firebaseConfig); const auth = getAuth(app); let analyti ...

Nodemailer is experiencing difficulties when used within the routes directory

Recently, I encountered an issue with my subscribe form. It functions perfectly when called from app.js where the express server is defined. However, when I move subscribe.js to the routes folder and connect both files, it fails to send emails. Upon pressi ...

Learn how to create a validation function for phone numbers in a React application that keeps the button disabled until a valid phone number

import React,{useState} from "react"; export default function ValidatePhone() { const [phoneNumber, setPhoneNumber] = useState(""); const [disableButton, setDisableButton] = useState(true); function handleChange(e) { setPho ...

The specified variable is not present within the for loop

This script dynamically generates table rows for each client, populating each row with specific values such as name, IP address, operating system, country, and time. These values are stored in an object or dictionary named clientel. The setup of the progr ...

Setting up a dropdown list with a Django variable following an AJAX request

I am facing an issue with implementing a dropdown that triggers an AJAX call when a new value is selected. In my setup, the AJAX script calls a Django view which returns a list of values. The problem arises when I try to populate a second dropdown with the ...

Retrieving values from a database using Bootstrap multiselect search option

I am currently utilizing bootstrap-multiselect in my project. I am attempting to retrieve database values through an ajax request in the search feature, but unfortunately, the values are not being appended. Here is my code: $('#example-getting-sta ...

Maintain user login state using React, Redux, and Firebase

I've successfully implemented my login and logout functions, but I'm unsure about how to keep users logged in. Any quick tips or advice on this matter would be greatly appreciated. Below are the actions for logging in and out: export function ha ...

Django REST Framework: Converting Data to JSON and Fetching it Using JavaScript from my API

How can I retrieve data from my API using JavaScript? My objective is to present my model data in the form of charts or graphs. For the visualization part, I have chosen Charts.js. Currently, I am able to display a chart in my template with default data. ...

When trying to serialize elements from a form loaded by Firefox using AJAX, encountering difficulties due to

Visit the live version of this at . When prompted for a formId, input BroadRunTrack2013. Follow by adding an item to cart and entering player name information (you can use random data for now). Select the Runner's Hat, choose color/size, specify quant ...

"Multiple instances of JavaScript files seem to be present when using Ajax navigation

Having some difficulties with AJAX navigation. The issue is that the JavaScript files loaded remain in the browser even after the new content is loaded, even when they are no longer in the DOM. These files appear as VM files in the browser console and cont ...

What is the best method to retrieve the window object in XUL?

I'm attempting to assign an onLoad event to the current webpage through a Firefox extension. My approach involves utilizing the gBrowser object, although I am uncertain if this is the most optimal method. The goal is to establish an onLoad event for t ...

Navigating between divs with a 100% height using up and down movements

I am working on a website that is structured into different sections using divs with shared classes but unique IDs. Each div is set to take up 100% of the viewport height. To navigate between these sections, I want to provide Up/Down arrow buttons for user ...

What is the best method to display a tooltip for a disabled radio button within a set of radio buttons?

Is there a way to disable a specific radio button based on a condition and display a tooltip only for that disabled button? https://i.stack.imgur.com/niZK1.png import {Tooltip} from '@mui/material'; <Tooltip titl ...

Using React Quill JS and looking to log to the console when a change handler is triggered?

As I dive into the world of web development, I am currently working on crafting a blog dashboard. For the text editor, I've opted to use React Quill. While following the documentation, I came across a tutorial that includes an 'on change' ha ...

How to assign a value to a component variable using props in Vue.js

I am attempting to assign a props value to my component variable. Below is the code I'm working with: export default { props: { // eslint-disable-next-line vue/require-default-prop multiPaginatedTableTitle: { type: Stri ...

Guide on invoking an Angular 1.5 component with a button press

Having just started learning Typescript, I'm struggling to figure out how to call my Angular component "summaryReport" on a button click. Here's a snippet of my code: Let's say I have a button that should call my component when clicked with ...

Is there a way to eliminate the shadow effect from the md-steppers tag in vue-material?

After using vue-material to create a stepper, I noticed that it includes a class called md-steppers-navigation which adds a box-shadow effect. I prefer not to have this shadow and am wondering how I can remove it. Any suggestions? ...