Question

我正在尝试从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();
    });

}());

Answer 1

如果您要加载dbRefObject下的所有数据，而不仅仅是hobbies，则可以执行以下操作：

const dbAllList = dbRefObject;

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

更改非常简单：

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

获取所有Firebase子级和值并在HTML上显示

1 个答案: