如何显示来自 Firebase 的名称

how to display name from firebase

本文关键字：Firebase 何显示 显示      更新时间：2023-09-26

我有这部分代码，我正在尝试让用户在用户来到地图时从 firebase 显示用户名。 但是当我运行代码时，它会擦除所有 HTML 并打印 2 行代码：

5Frederick619
•5Profile-10

基本上删除了我的所有代码

<!--you can-->
<div class="row">
    <div class="col-md-12 youcan">
        <h4>You can:</h4>
        <ul>
            <li><span>1</span> Track the location your friends my brother</li>
            <li><span>2</span> Track the location your friends my brother</li>
            <li><span>3</span> Track the location your friends my brother</li>
            <li><span>4</span> Track the location your friends my brother</li>
            <script>
                var endpoint;
                endpoint = new Firebase('https://keepitstreet.firebaseio.com/maps/openmap');
                endpoint.on('child_added', function(childSnapshot) {
                    var uuid = childSnapshot.key()
                    var point = childSnapshot.val()
                    var username = childSnapshot.val();
                    var name = username.name;
                    document.write('<li><span>5</span>'+ name +'</li>');
                })
            </script>
        </ul>
    </div>
</div>
<!--/you can-->
document.write用于

打开新窗口并在其中插入内容，因此当调用加载的文档时，它将清除它。 这就是为什么你的整个HTML被删除的原因，除了你写到文档的最后一件事。

您需要的是添加新项目。 你可以做这样的事情： 

function getPosts() {
  var endpoint;
  var list = document.querySelector('.youcan ul');
  endpoint = new Firebase('https://keepitstreet.firebaseio.com/maps/openmap');
  endpoint.on('child_added', function(childSnapshot) {
    var uuid = childSnapshot.key()
    var point = childSnapshot.val()
    var username = childSnapshot.val();
    var name = username.name;
    appendPosts(name)
  })
  function appendPosts(name) {
    var li = document.createElement('li');
    li.textContent = name;
    list.appendChild(li);
  }
}
相关文章：