获取所有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();
    });

}());

编辑：

谢谢你的帮助！我能够控制台。记录它并获得所有的值！第二，如果我想“监听”数据库中的更改，例如添加、删除或更改的内容，并希望在HTML列表中显示，我将如何实现这一点？我将所有内容都更改为dbreObject.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();
    });

}());

---

如果要加载

dbreObject

下的所有数据，而不仅仅是

cabiods

，可以执行以下操作：

const dbAllList = dbRefObject;

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

这些变化相当简单：

我从您所听的引用中删除了

child（'cabiods'）

调用，这意味着

one（'value'

现在将返回JSON树中更高级别的所有数据

我在回调中添加了一个额外的

allSnapshot.forEach（…）

循环，以循环现在返回的所有子级

---

谢谢Frank！我能够进行控制台操作。正确地将其注销。我如何侦听更改，例如删除、添加等？编辑的代码已放在上面的原始问题下。这听起来像是另一个问题。但是如果您想获得单个子节点事件的通知，请侦听单个子节点*事件，如图所示re：。您需要删除

forEach

循环，因为这样会由JSOn中较低级别的节点触发。