[英]How do you push data to firebase when a javascript button is clicked?
I am a complete noob when it comes to JavaScript and cannot seem to solve this problem.当谈到 JavaScript 时,我完全是个菜鸟,似乎无法解决这个问题。
I have a main.js file that was an output from Adobe animate.我有一个 main.js 文件,它是来自 Adobe animate 的 output。 Within that is the following pertinent code I added:
其中是我添加的以下相关代码:
this.button = new lib.submit();
this.button.name = "button";
this.button.on("click", function (a) {
var address = document.getElementById("addrs").value
var data ={address:address}
console.log(data)
}.bind(this));
Right now, I'm just displaying the information I typed into the TextInput('addrs')
to the console to verify everything works.现在,我只是将我在
TextInput('addrs')
中输入的信息显示到控制台,以验证一切正常。
I also established a connection to a Firebase database within the index.js and there I have the following code:我还在 index.js 中建立了与 Firebase 数据库的连接,我有以下代码:
push(ref(db), {
address: "1234 Maple Ln",
});
This is just a static placeholder for me to verify Firebase can receive information.这只是一个 static 占位符,供我验证 Firebase 是否可以接收信息。
What I am trying to do is push the information that is now currently being saved to var data ={address:address}
to Firebase instead of the static address: "1234 Maple Ln"
.我要做的是将当前保存到
var data ={address:address}
的信息推送到 Firebase 而不是 static address: "1234 Maple Ln"
。
All of the tutorials I've found online use an HTML form.我在网上找到的所有教程都使用 HTML 表格。 How do you do this when the submit button is in a different JavaScript file than where the
push()
is?当提交按钮与
push()
位于不同的 JavaScript 文件中时,如何执行此操作?
As per the docs , you can use set()
to write data to the database.根据文档,您可以使用
set()
将数据写入数据库。 The set()
function accepts two arguments: set()
function 接受两个 arguments:
ref
function, which further accepts two more arguments ref
function,进一步接受两个 arguments
1.a. 1.a. database instance
数据库实例
1.b. 1.b。 Endpoint for the database
数据库的端点
Data that needs to be added.需要添加的数据。
So you can create a function that handles creating of data in firebase, something like this:因此,您可以创建一个 function 来处理 firebase 中数据的创建,如下所示:
import { getDatabase, ref, set } from "firebase/database";
function writeUserData(address) {
const db = getDatabase();
set(ref(db, 'ENDPOINT/'), {
address
});
}
Further, you could hook this function to click listener on the button ( Invoke this function and pass the required data as a parameter).此外,您可以挂钩此 function 以单击按钮上的侦听器(调用此 function 并将所需数据作为参数传递)。
this.button.on("click", function (a) {
var address = document.getElementById("addrs").value
writeUserData(address)
console.log(data)
}.bind(this));
Note that, after getting hold of the address
data, I haven't explicitly converted the data into an object, because javaScript does that for us under the hood when the key and value variable are named the same.请注意,在获取
address
数据后,我没有将数据显式转换为 object,因为当键和值变量命名相同时,javaScript 会在后台为我们执行此操作。 This is called Object destructuring .这称为Object 解构。
If you have got the function and the event listener in two different files, you could either import the function in the file where the listener is present or, define the callee function logic within the listener.如果您在两个不同的文件中有 function 和事件侦听器,您可以在存在侦听器的文件中导入 function,或者在侦听器中定义被调用者 ZC1C425268E68385D14AB5074C179 逻辑。 Of the two, the former is advised to keep the code clean and modular.
在这两者中,建议前者保持代码干净和模块化。
Index.js
索引.js
import { getDatabase, ref, set } from "firebase/database";
export function writeUserData(address) {
const db = getDatabase();
set(ref(db, 'ENDPOINT/'), {
address
});
}
Main.js
主.js
import {writeUserData} from 'path/to/indexjs'
this.button.on("click", function (a) {
var address = document.getElementById("addrs").value
writeUserData(address)
console.log(data)
}.bind(this));
(Or) Include the data pushing logic within the click listener: (或)在点击监听器中包含数据推送逻辑:
import { getDatabase, ref, set } from "firebase/database";
this.button.on("click", function (a) {
var address = document.getElementById("addrs").value
const db = getDatabase();
set(ref(db, 'ENDPOINT/'), {
address
});
console.log(data)
}.bind(this));
I figured it out.我想到了。
@Prajwal-Kulkarni pointed me in the right direction. @Prajwal-Kulkarni 为我指明了正确的方向。 I just had to change the
我只需要改变
push(ref(db), {
address: "1234 Maple Ln",
});
to至
window.writeUserData=function(address) {
push(ref(db), {
address
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.