将Firebase数据加载到Web应用程序中的问题

Question

我在Web应用程序中遇到有关将数据加载到应用程序中的问题。

该应用程序如下所示：

数据以用户显示名称保存到数据库中。代码看起来像这样保存数据：

＆＃13;

＆＃13;

function saveToFB(bookName) {

  var user = firebase.auth().currentUser;

  name = user.displayName;

  firebase.database().ref('Book/' + name).push({
    book: bookName,
  });

};

＆＃13;

＆＃13;

＆＃13;

因此，当用户保存数据时，它将保存在作为其显示名称的节点下。我目前有2个注册用户，每个用户都有不同的显示名称和不同的数据。 JSON看起来像这样：

然而，当涉及将数据加载到应用程序中时，我遇到了一些问题。它不是加载与当前登录用户相对应的数据，而只是加载上次登录用户的数据。

从这个截图中可以看出 - 控制台清楚地表明Joe已登录但正在显示George的数据。

甚至不刷新页面都会使用正确的数据填充应用程序。我首先要添加一本新书，它不会显示在Joe not George下面，只有在刷新页面后才能显示Joe的数据。

但是当我退回并进入另一个帐户并显示之前的数据时，问题又出现了。

我的JS对于应用程序的其余部分看起来像这样：

＆＃13;

＆＃13;

function refreshUI(list) {
var lis = '';
var lis2 = '';
var lis3 = '';

      for (var i = 0; i < 10 && i < list.length; i++) {
        lis += '<li style="width: 150px" data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
      };
      for (var i = 10; i < 20 && i < list.length; i++) {
        lis2 += '<li style="width: 150px" data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
      };
      for (var i = 20; i < 30 && i < list.length; i++) {
        lis3 += '<li style="width: 150px" data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
      };
        document.getElementById('bookList').innerHTML = lis;
        document.getElementById('bookList2').innerHTML = lis2;
        document.getElementById('bookList3').innerHTML = lis3;
    };

function genLinks(key, bkName) {
var links = '';
links += '<a href="javascript:del(\'' + key + '\',\'' + bkName + '\')"><i id="deleteBook" class="material-icons">delete</i></a> ';
links += '<a href="javascript:remove(\'' + key + '\',\'' + bkName + '\')"><i id="removeBook" class="material-icons">clear</i></a> ';
links += '<a href="javascript:select(\'' + key + '\',\'' + bkName + '\')"><i id="selectBook" class="material-icons">check</i></a>';
return links;
};

function del(key, bkName) {
var deleteBookRef = buildEndPoint(key);
  deleteBookRef.remove();
}

function select(data, book, key) {
document.getElementById('selectBook').style.color="blue";
document.getElementById('selectBook').style.color="blue";

var selectBookRef = book;
  document.getElementById('alltext').value += selectBookRef + ',';
}

function buildEndPoint (key) {
return new Firebase('https://project04-167712.firebaseio.com/Book/' + '/' + name + '/' + key);
}

var bookList = firebase.database().ref('Book/' + name);


// The issue - I think

bookList.on("value", function(snapshot) {
var data = snapshot.val();
var list = [];
    for (var key in data) {
        if (data.hasOwnProperty(key)) {
            book = data[key].book ? data[key].book : '';
        if (book.trim().length > 0) {
            list.push({
            book: book,
            key: key
            })
        }
    }
}
refreshUI(list);
});

＆＃13;

＆＃13;

＆＃13;

我正在寻找的是用户登录他们的帐户并查看他们的数据，而不是其他人。

对此问题的任何帮助都会很棒 - 这是迄今为止我尝试过的唯一方法，只向用户展示他们的数据而不是所有其他用户＆＃39;数据及其 - 如果有任何其他建议如何做到这一点，我会很感激。