Is there a way to remove a particular map from Firestore?

In my Google Firebase setup, I have uniquely named each Map to serve as the index for every document. Using Vuejs (Javascript), I have structured it as follows:

eQFelbD432T (Collection Name- user.uid)
  SKILLS (Document Name)
    ProjectManangement (Map Name)
      Rating: 4      (Key - Value Pair)
      Experience: 2  (Key - Value Pair)
    SystemEngneering (Map Name)
      Rating: 6       (Key - Value Pair)
      Experience: 2   (Key - Value Pair)

Now, I am trying to delete a specific map along with all its values, but I am struggling to figure out how to do so as there seems to be no direct way to target that particular map.

The code I currently have is as follows - however, it is not functioning correctly: The variable mapName contains the name of the map that needs to be deleted (e.g. ProjectManagement) provided by a function.

let ref = db.collection(this.$store.getters.getUserId).doc('SKILLS')
ref.get().then(doc => {
  if (doc.exists) {
    ref.update( { [mapName]: FieldValue.delete() } )
  }
})

I'm hoping someone can assist me with this issue, or perhaps I am overlooking a simple solution...

Thank you and best regards

Answer №1

I managed to solve the problem.

This is what the functional code looks like:

ref.get().then(doc => {
          if (doc.exists) {
            ref.update( { [mapName]: firebase.firestore.FieldValue.delete() } )
          }
        })

Interestingly, in order to delete a single map, I had to include "firebase.firestore." before FieldValue despite already importing firebase (import firebase from 'firebase').

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

Steps to close a socket upon session expiration

I am currently working on a small express application that also incorporates a socket program. Everything works perfectly when a user successfully logs in - it creates the session and socket connection seamlessly. However, I encountered an issue where eve ...

"Exploring ways to reattempt a route request upon encountering the $stateNotFound event within AngularUI Router

Managing a large AngularJS application can be quite challenging when it comes to splitting it into functional modules. Currently, all the modules are loaded on the initial page load as they are bundled into a single JavaScript file. However, I am looking t ...

Transfer information from PHP to JavaScript across distinct files

In my website, I have several files including login.php, main.php, functions_js.js and functions_php.php. The login.php file retrieves two variables that I need to pass to the functions_php.php file via AJAX. In functions_php.php, I execute a SELECT query ...

Invoking a child component's method using a parent event

Hello, I am a newcomer to VueJS and JavaScript and would greatly appreciate your assistance. I am facing an issue with my method "greet" not working, and I am uncertain as to why. When I click on the button "change to bar," I receive the following error: ...

The dropdown menu is dynamically populated based on the selection from another dropdown menu, with options retrieved from

Apologies if this has been addressed previously, but the existing solutions do not seem to work for me. I have 5 dropdowns: Brand, Model, Color, Engine No., and Chassis No. My query pertains to how I can link the dropdown options for Model based on the sel ...

Discover the size of an image using JavaScript by accessing innerHTML

I'm currently working on a unique AJAX function that retrieves image URLs without using node append for insertion. Instead, I opted to utilize innerHTML, but this has posed challenges in accurately obtaining the file dimensions. My current approach i ...

Query parameter is not defined

Can anyone assist me with extracting the ean from the following URL: This NodeJS server processes the request in the following manner: const http = require('http') const port = 3000 const requestHandler = async (request, response) => { ...

implement a filtering feature in vue with vuetify using a button

I am attempting to sort the data when a button is clicked. While I have successfully filtered the data in the console log, I am unsure of how to return that filtered data. Here is the approach I have taken: <script> export default { name: &ap ...

What could be the reason for Firebase still throwing errors after executing NPM install command?

After successfully running NPM Install without any issues, I encounter an error when attempting to deploy Firebase. Here is a snippet of the NPM install process: xxxxxx-MacBook-Pro:Edzuki-Learning xxxx$ npm install audited 375 packages in 3.733s found 0 ...

Issue - The module ./en.json could not be located when using the vue-i18n plugin

I recently integrated the i18n plugin into my existing Vue project to add localization. After following all the installation instructions from various sources (such as here), I made sure that each locale has its own file under /src/locales with the correct ...

What is the best way to retrieve the page slug within the layout file in Next.js, specifically when using the app folder structure?

In my latest project, I have implemented a nested layout using the new app folder. Within this layout, I have included a header that appears across all pages in the path www.mysite.com/some-slug. One issue I am facing is with the signup button located in t ...

Transitioning between states in React with animation

In my React application, I have a menu that contains a sub-menu for each item. Whenever an item is clicked, the sub-menu slides in and the title of the menu changes accordingly. To enhance user experience, I aim to animate the title change with a smooth fa ...

Prevent selection based on function in Angular

I'm attempting to prevent certain options from being selected based on a specific method. For instance, let's say I have four options: A B C D In my method (let's use "x" as an example): if(name == A) { disable the selection for option A. ...

Attempting to modify the audio tag's src attribute with JavaScript

I've been doing online research for the past few weeks and have come across similar solutions to what I'm trying to achieve. However, due to my limited knowledge of javascript, I am struggling to implement them effectively. My goal is to have an ...

button that takes you back to the top of a mobile website

I want to customize the Scroll To Top button so that it only appears once the user begins scrolling down, rather than always being visible even when at the top of the page. Just a heads up, I don't have much experience with JavaScript, so I might need ...

Having trouble with implementing ng-hide and ng-show functionality

I have been working on creating my very first Angular website and so far, everything has been going smoothly with the first page. However, I am facing an issue with the second page not appearing as expected when it meets the condition set with ng-show in t ...

The post request is successful in Postman and cURL, however, it faces issues when executed in Angular

A remote server and a local client are set up to communicate through a simple post request. The client sends the request with one header Content-Type: application/json and includes the body '{"text": "hello"}'. Below is the s ...

Can JQuery be used to detect text input in real-time in a textarea field?

Currently, I have a button for "post" that becomes active when text is typed into the text area. The issue arises when all text is deleted from the text area, as the button remains active in its coloured state despite being disabled using the following cod ...

Creating an input in Vue3/Javascript that restricts input to only numbers seems to be a challenge

I have a project that involves an input field which should only accept numerical values. Within the template, I've set up an input element with the value bound to a variable and the input event linked to a function that verifies if the entered value ...

Utilizing Axios to pass multiple values through a parameter as a comma-separated list

Desired query string format: http://fqdn/page?categoryID=1&categoryID=2 Axios get request function: requestCategories () { return axios.get(globalConfig.CATS_URL, { params: { ...(this.category ? { categoryId: this.category } : {}) } ...