Updating a document on Firestore based on a query is a straightforward process that involves first identifying

I'm currently working on a web form page that needs to update input fields into a specific firestore document based on certain conditions. Can anyone provide guidance on how this can be achieved?

The initial part where I retrieve the query results seems to be functioning correctly, as indicated by the correct query result displayed in the console log. However, the second part which involves updating the document appears to be encountering some issues.


const reportForm = document.querySelector('#daily-reports');

reportForm.addEventListener('submit', (e) => {
    e.preventDefault();

    const forward = reportForm['forward'].value;
    const reflected = reportForm['reflected'].value;
    // additional code for other input fields omitted for brevity

    console.log(forward, reflected); // example fields logged here
    firebase.initializeApp(config);
    const db = firebase.firestore();
    
    // authentication and query logic here
    
    });

Upon executing the code, an error message is returned:

Error getting documents: TypeError: "doc.data(...).update is not a function"
    <anonymous> func.js:42
    forEach database.ts:2131
    // Additional error logs truncated for readability

Answer №1

Retrieve the raw data content of a DocumentSnapshot using the data() method. The resulting object is a plain JavaScript object without any additional methods.

To update the document associated with a DocumentSnapshot, utilize the ref property to obtain a DocumentReference, followed by invoking the update() method on this object.

doc.ref.update({...})

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

Ionic (Angular) experiencing crashes due to numerous HTTP requests being made

My template contains a list of items <ion-list class="ion-text-center"> <div *ngIf="farms$ | async as farmData"> <ion-item (click)="selectFarm(farm)" *ngFor="let farm of farmData" detail=&quo ...

"Maximizing the Power of Node.js and Firebase Integration

A question arises in my mind as I have an application that sends an image via POST request to a third-party API. One of the parameters required is an imageCallbackURL, which serves as a webhook callback URL once the image has been processed. If my backend ...

When attempting to create a table in BigQuery, the operation may fail if the JSON key includes a

The data I have is in JSON format from a Firebase Backup. Every key in the data is preceded by a hyphen. Here is an example of the data: "-GuGCJDEprMKczAMDUj8":{"deviceId":"399a649c6cee6209","dow":"Thursday","downloadFlag":"N","event":"streamStart","half ...

What is the best way to differentiate and analyze new AJAX output from previous data using div elements?

Embarking on a project to develop a high/low game using JavaScript, I encountered a perplexing issue where the displayed numbers seemed to be out of sync with the variables stored. This discrepancy left me scratching my head as I struggled to get them to a ...

Having trouble opening a JPEG file that was generated using the Writefile Api in Ionic-Cordova

Currently, I am using the writeFile API to create a JPEG image. The process is successful and the image is stored in the directory as expected. However, when I try to open the file manually from the directory, I encounter an error message saying "Oops! Cou ...

unique array that shuffles every time it is reloaded, utilizing only javascript

I have created a string array that holds 6 different classes. Whenever I click a button, a new class is generated randomly. However, the issue arises when I click the button again and get the same class instead of a new random one. Even after reloading the ...

Execute a specialized function with imported modules and specified parameters

Within an npm project, I am looking to execute a custom function with arguments, or ideally provide it as a script in the package.json file like this: npm run custom-function "Hello, World". Currently, I have a file called src/myFunction.ts: import * as e ...

Unable to locate an element on the webpage due to a JavaScript-based error, which then becomes hidden after a few seconds. (Registration form)

While completing a registration form, I encounter a hidden message after clicking on the register button. Struggling to locate this elusive element has been an ongoing challenge for me. Unfortunately, my attempts to find the element have been unsuccessful ...

What is the process for assigning variables to modules using RequireJS?

Is there a way to define variables for modules in RequireJS? In simpler terms, how can I achieve the equivalent of the following using RequireJS: var fs = require('fs'); var child_process = require('child_process'); I am looking to s ...

Is there a way to ensure that my AngularJS factory fetches HTTP data only once?

I have implemented a factory in my project to share data among multiple controllers. Here is the code for my factory: var szGetData = "some url that works"; myApp.factory('Data', function ($http) { var eventData = {}; eve ...

Values do not appear as expected post PDF conversion using wkhtmltopdf

Currently, I am updating certain values within my HTML page by following this process: The function: function modifyContent(){ var newTitle = document.getElementById('myTextField1').value; if( newTitle.length==0 ){ alert('Plea ...

A function that retrieves the empty values from an array and returns undefined if there

After undergoing a time-consuming process, the sample below shows that the array values are returned empty. function myFunction() { let myArray = []; let pastArray = [1, 2, 6, 7, 8, 1, 9, 6, 0] pastArray.forEach(item =>{ setTimeout(function(){ myA ...

Is there a way to dynamically insert the value of an input field into a text field in real time using Javascript or ajax?

In my form, there is a text field with the id #image_tag_list_tokens. It looks like this: = f.text_area :tag_list_tokens, label: "Tags (optional) ->", data: {load: @image_tags }, label: "Tags" Additionally, I have an input field and a button: <i ...

Get the ID from a row that was created dynamically

I have a webpage that pulls information from my database and displays it. Users should be able to click on the "details" link to see more details about a particular record, or click on an input box in the "check" column and submit to update the record stat ...

Persistent vertical menu dropdown that remains expanded on sub menu pages

I am struggling to understand how to keep my menu sub items open when on the active page. Although I have tried similar solutions, I have not been successful in implementing them. I apologize if this question has been asked before. My approach involves usi ...

Can you place more than one Twitter Bootstrap carousel on a single webpage?

Latest Version of Twitter Bootstrap: 2.0.3 Sample HTML Code: <!DOCTYPE html> <html dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/"> <head> <link rel="stylesheet" type="text/css" media="all" href="reddlec/style. ...

What could be causing my array to be misconverted into JSONP data?

let defaultPosts = new Array([]); defaultPosts[0] = "first post"; defaultPosts[1] = "second post"; defaultPosts[2] = "third post"; The array in the console is showing ["first post", "second post", "third post"]; let jsonString = JSON.stringi ...

Detach attention from TextField select component in Material UI and React through manual means

When I create a select input using the TextField component from Material-UI library, I need to manually remove focus after an option is selected. I attempted to achieve this by using a reference to the TextField with the 'inputRef' prop. However, ...

Using Next-Image Relative Paths can lead to 404 errors when being indexed by web crawlers

I have implemented next-image in my project, and all the images are hosted on Cloudinary. The images display correctly, but when I run a website analysis using tools like Screaming Frog, I receive numerous 404 errors. This is because the tools are looking ...

What is the best way to create a dynamic pie chart in AngularJS using JSON data?

In my controller: When calling the web services, if the service is successful, then retrieve the data and push it into the corresponding arrays. for(var i = 0; i < $scope.reportRangeList.length; i++) { count++; if( ...