Steps for updating information in Firebase version 9

How can I add a new record and also change the 'bill' value, but I'm not sure what to input in this string?

const newPostKey = (child(ref(db), )).key;

This is the Vuex action I am using to make a request to Firebase:

async updateInfo({ dispatch, commit, getters }, toUpdate) {
  try {
    const uid = await dispatch('getUid')
    const db = getDatabase();
    const updateData = { ...getters.info, ...toUpdate }
    const postListRef = ref(db, `/users/${uid}/info`);
    const newPostKey = (child(ref(db), ????)).key;
    const updates = {};
    updates[newPostKey] = updateData;
    update(postListRef, updates)
    commit('setInfo', updateData)

  } catch (e) {
    commit('setError', e)
    throw e
  }
},

The code works fine up to the step where const newPostKey is declared.

If I input 'info' in this string:

const newPostKey = (child(ref(db), 'info')).key;

The record will be added, but the 'info' will be updated incorrectly: https://i.sstatic.net/Vn1C6.png

Answer №1

To simply update the value of bill, you can implement the following:

const userReference = ref(db, `/users/${userId}/details`);

update(userReference, { bill: 150 }).then(() => { // change 150 to your desired bill amount
  console.log("Bill Updated Successfully")
}).catch(error => console.log(error))

If you wish to increment the bill by a specific amount, you can utilize the increment() function.

update(userReference, { bill: increment(150) }) // increment by 150

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

Executing Backbone.history.start() prevents the back button from navigating away from the current page

I've encountered this issue in multiple apps, leading me to question if there's an error in my handling of Backbone history. The scenario is as follows... There are two pages: index.html app.html The index page is a standard HTML page with a l ...

Is purchasing a Twilio phone for sending SMS messages a good idea?

As part of my testing process, I have implemented this code for sending SMS messages. Everything is working fine so far, but I have a question regarding the necessity of purchasing a Twilio phone number to input into the "from" field. I intend to send real ...

The integration of query, URL, and body parameters is not working as expected in Seneca when using Seneca

I'm facing some difficulties with Seneca and seneca-web as a beginner. This is the current state of my code: "use strict"; var express = require('express'); var Web = require("seneca-web"); var bodyParser = require('body-parser' ...

Can a Vue computed property return a promise value?

I have a specific computed property in my code that triggers an API request and retrieves the required data: async ingredients() { const url = "/api/ingredients"; const request = new Request(url, { method: "GET", credentials: "same-or ...

Is it possible for me to declare attributes using a function object in a single statement?

Given an object obj, the following two-line statements can be defined: var obj ={} //this is an object obj.isShiny = function () { console.log(this); return "you bet1"; }; These two lines can be combined into a one-line statement ...

Creating multiple instances of an object

When using Javascript, I am trying to create an object in the following way: var testObject = { value: "this is my initial value", setup: function() { value: "foo" } }; Now, my goal is to instantiate this object and have different val ...

What is the best way to retrieve a list of fields from a set of JSON documents?

Currently, I am facing a scenario where I have two MongoDB collections named stu_creds and stu_profile. My objective is to initially fetch all the student records from the stu_creds collection where the stu_pref_contact field corresponds to email. Subseque ...

Reactjs rendering problem related to webpack

Greetings! I am new to using react js and decided to create a quiz application. However, I encountered an error when the render function was called. Below is my webpack.config file: module.exports = { entry: { app: './src/index.js' }, ...

Checking the content of a textfield in React Material UI based on the user input

Hello! I am seeking a solution to trigger an error message whenever the value entered in the first text field is not equal to "28.71", otherwise display a correct message. Here is my current code: class Main extends React.PureComponent { render() { ...

Reveal unseen information on the webpage upon clicking a link

I have successfully implemented a fixed header and footer on my webpage. The goal is to make it so that when a user clicks on a link in either the header or footer, the content of that page should appear dynamically. While I have explored various styles, ...

Displaying success and failure messages on a modal window using Ajax in PHP form

Unable to display error messages or success messages in the same modal window. I have set up Wordpress and using the following code: Form <form id="formcotizador" method="post" action="<?php echo get_template_directory_uri(); ?>/cotizador/procc ...

Tips for sorting through and minimizing data based on the most recent date

info = { start: 1, data: [ { name: 'Maria', date: '2020-02-15 }, { name: 'Paula', date: '2020-06-10 }, { name: 'Eva', date: '2020-12-05 }, { name: 'Sophia', date ...

Adjust the hue of a specific node

Is there a way to customize the color of an individual node in an eChart treemap? I attempted to set a color property for the node, but it didn't seem to work. While I was able to change the label's color, I'm interested in changing the back ...

In development, Next.js dynamic routes function correctly, but in production they are displaying a 404 error page

I am currently working on implementing dynamic routes in my Next.js project to render pages based on user input. I have set up a route that should display the page content along with the id extracted from the URL using the useRouter() hook. Everything is f ...

How can I show the last li item in a ul element that extends beyond its parent container?

Chat App Development In my current project, I am developing a chat application using React. The app consists of a list (ul element) that displays messages through individual items (li elements). However, I have encountered an issue where the ul element st ...

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" ...

JavaScript function following AJAX request

I'm attempting to invoke a JavaScript function that is returned in an Ajax call What is the proper way to run a JavaScript function received from an Ajax call? Consider this script before the Ajax call <script> function start(){ console.l ...

What is the reason for instanceof Map returning false?

Utilizing the Draft.js plugin called Mention. When accessing editorState.content.entityMap.mention, I am able to retrieve the value by: mention.get('address') However, when I attempt to verify if it is a Map using: console.log('mention&a ...

Refreshing a single HTML element in ASP.NET MVC - the simple way!

Recently, I put together an image gallery using the unite gallery jquery plugin and now I want to change up the images it displays. My plan is to have a button labeled "art" that, when clicked, triggers a function to update the directory path and load ne ...

The browser fails to implement styling prior to a demanding workload

Is it possible to refresh a section of my webpage that contains numerous DOM elements? My ideal approach would be to hide the section using visibility: hidden;, then redraw it, and finally set visibility back to visible;. However, I've encountered an ...