从实时数据库读取 Firebase Web答案

【问题标题】：Firebase Web Read from Real-Time Database从实时数据库读取 Firebase Web
【发布时间】：2022-10-07 09:18:12
【问题描述】：

我试图显示他们在数据库中输入的用户价格，但我得到的是 \"undefined\' 而不是输入的值。我没有得到任何错误控制台也可以。我该如何解决这个问题？我正在使用 HTML、JavaScript 和 CSS。我提供了屏幕截图和我的代码。

工作室仪表板 JavaScript：

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Initialize variables
const database = firebase.database();
const auth = firebase.auth();

//const auth = getAuth();
firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        readData();
        // ...
    } else {
        window.location.href = \"login.html?error\";
        alert(\"No active user please sign or sign up.\");
    }
});

function readData() {

    const user = firebase.auth().currentUser;

    database.ref(\'/studiopick/studio/users/\' + user.uid).get().then(snapshot => {

        // Tab One Display
        document.getElementById(\"studioName\").innerText = snapshot.val().studioName;
        document.getElementById(\"profile-name\").innerText = snapshot.val().studioName;
        document.getElementById(\"firstName\").innerText = snapshot.val().firstName;
        document.getElementById(\"lastName\").innerText = snapshot.val().lastName;
        document.getElementById(\"lastName\").innerText = snapshot.val().lastName;
        document.getElementById(\"email\").innerText = snapshot.val().email;
        document.getElementById(\"phoneNumber\").innerText = snapshot.val().phoneNumber;

        // Tab Two Display
        document.getElementById(\"servicePrice\").innerText = snapshot.val().numberInput;
    }).catch(e => { console.log(e) })
}

function updatePrice() {
    // Get data
    numberInput = document.getElementById(\"numberInput\").value;

    const user = firebase.auth().currentUser;

    // Enter database location
    firebase
        .database()
        .ref(\'/studiopick/studio/users/\' + user.uid + \"/prices/roomA/serviceOne\")
        .update({
            //studioName : studioName,
            numberInput: numberInput,
        });
}

标签： javascript html firebase-realtime-database

【解决方案1】：

您应该使用on 方法而不是get


function readData() {

    const user = firebase.auth().currentUser;

    database.ref('/studiopick/studio/users/' + user.uid).on('value', (snapshot) => {

        //Tab One Display
        document.getElementById("studioName").innerText = snapshot.val().studioName;
        document.getElementById("profile-name").innerText = snapshot.val().studioName;
        document.getElementById("firstName").innerText = snapshot.val().firstName;
        document.getElementById("lastName").innerText = snapshot.val().lastName;
        document.getElementById("lastName").innerText = snapshot.val().lastName;
        document.getElementById("email").innerText = snapshot.val().email;
        document.getElementById("phoneNumber").innerText = snapshot.val().phoneNumber;

        //Tab Two Display
        document.getElementById("servicePrice").innerText = snapshot.val().numberInput;
    }, (e) => { console.log(e) })
}

【讨论】：