时间戳

首页 > 解决方案 > 获取所有 Firebase 子项和值并在 HTML 上显示

html - 获取所有 Firebase 子项和值并在 HTML 上显示

问题描述

我正在尝试从 Firebase 获取所有孩子的数据，并在 HTML 中的无序列表上显示数据。目前，我只能获取儿童“爱好”的数据。如何在“爱好”中没有硬编码的情况下获得“对象”下的所有子值？下面是我的 App.js 文件：

  (function() {

    //Initialize Firebase
    const config = {
        apiKey: "AIjjjewjfjewjfjwefwefew",
        authDomain: "xxxxxxxxx.firebaseapp.com",
        databaseURL: "https://xxxxxxxxx.firebaseio.com",
        storageBucket:"xxxxxxxxxx.appspot.com",
    };
    firebase.initializeApp(config);

    //Get elements
    const preObject = document.getElementById('object');
    const ulList = document.getElementById('list');
    var UID = ' ';
    var UIDArray = [];

    //Create refences
    const dbRefObject = firebase.database().ref().child('object');
    const dbRefList = dbRefObject.child('hobbies');

    dbRefObject.once("value").then(function(snapshot) {

    snapshot.forEach(function(childSnapshot) {

    var keys = childSnapshot.key;
    var values = childSnapshot.val();
    var name = values['Name'];
    var credit = values['Credits'];

    console.log(keys); //keys
    console.log(values); //values 
    console.log(name);//name
    console.log(credit);//name

    });
  });
    //const dbRefList = dbRefObject.child(UID);

    //Sync object changes
    dbRefList.on('value', snap => {
        preObject.innerText = JSON.stringify(snap.val(), null, 3);

    });

    //Sync list changes
    dbRefList.on('child_added', snap => {

        const li = document.createElement('li');
        li.innerText = snap.val();
        li.id = snap.key;
        var keyValue = snap.key;

        ulList.appendChild(li);

    });

    dbRefList.on('child_changed', snap => {

        const liChanged = document.getElementById(snap.key);
        liChanged.innerText = snap.val();
    });

    dbRefList.on('child_removed', snap => {

        const liToRemove = document.getElementById(snap.key);
        liToRemove.remove();
    });

}());

编辑：

谢谢您的帮助！我能够 console.log 它并获取所有值！第二个注意事项，如果我想“监听”更改，例如在数据库中添加、删除或更改某些内容并且我想在 HTML 列表中显示，我将如何实现？我将所有内容都更改为 dbRefObject.on(child_changed', childSnapshot => ), child_removed', childSnapshot => 等，但似乎不起作用。我试图将我之前的内容更改为以下内容：

(function() {

const config = {
        apiKey: "xxxxxxxxxxx",
        authDomain: "dxxxxx.firebaseapp.com",
        databaseURL: "https://xxxxx.firebaseio.com",
        storageBucket:"xxxxxxx.appspot.com",
    };
    //Initialize Firebase
    firebase.initializeApp(config);

    //Get elements
    const preObject = document.getElementById('object');
    const ulList = document.getElementById('list');
    var UID = ' ';
    var UIDArray = [];

    //Create refences
    const dbRefObject = firebase.database().ref().child('object');
    const dbRefList = dbRefObject.child('hobbies');

    dbRefObject.once("value").then(function(allSnapshot) {
        allSnapshot.forEach(function(snapshot) {
          snapshot.forEach(function(childSnapshot) {

    var keys = childSnapshot.key;
    var values = childSnapshot.val();
    var name = values['Name'];
    var credit = values['Credits'];
    var location = values['Location'];

    console.log(keys); //keys
    console.log(values); //values 
    console.log(name);//name
    console.log(credit);//name
    console.log(location);//name
    ulList.append(" ",name, " " , credit, " ", location );

    });
    });
  });

    //Sync object changes
    dbRefObject.on('value', childSnapshot => {
        preObject.innerText = JSON.stringify(childSnapshot.val(), null, 3);

    });

    //Sync list changes
    dbRefObject.on('child_added', childSnapshot => {

        console.log(childSnapshot.val())
        const li = document.createElement('li');
        li.innerText = childSnapshot.val();
        li.id = childSnapshot.key;
        var keyValue = childSnapshot.key;
        console.log(keyValue);
        ulList.appendChild(li);

    });

    dbRefObject.on('child_changed', childSnapshot => {
        console.log(childSnapshot.val());
        console.log(childSnapshot.key);
        const liChanged = document.getElementById(childSnapshot.key);
        liChanged.innerText = childSnapshot.val();

    });

    dbRefObject.on('child_removed', childSnapshot => {

        const liToRemove = document.getElementById(childSnapshot.key);
        liToRemove.remove();
    });

}());

标签： htmlnode.jsfirebasefirebase-realtime-database

解决方案

如果要加载下的所有数据dbRefObject，而不仅仅是hobbies你可以这样做：

const dbAllList = dbRefObject;

dbRefObject.once("value").then(function(allSnapshot) {
  allSnapshot.forEach(function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      ...

更改相当简单：

  1. 我child('hobbies')从您收听的引用中删除了调用，这意味着once('value'现在将返回 JSON 树中更高级别的所有数据。
  2. 我在回调中添加了一个额外allSnapshot.forEach(...)的循环，以循环现在返回的所有子项。

推荐阅读