Отображаемые имена под изображениями профиля Firebase Web Realtime-Database - PullRequest
Новая
       99

Отображаемые имена под изображениями профиля Firebase Web Realtime-Database

0 голосов
/ 02 августа 2020

Указано пользователем c info Profile pi c display Я исправил массу ошибок, которые у меня были раньше. Цель: динамически отображать всех зарегистрированных пользователей с их именами, отображаемыми под их профилем pi c. Что он делает сейчас: динамически отображает всех пользователей (при нажатии показывает конкретную c информацию о пользователе) и фотографии профиля в отдельных блоках div. Изображение: Dynami c отображаемые изображения Фрагмент: 

const dbRef = firebase.database().ref();
const usersRef = dbRef.child('userInfo');
const userListUI = document.getElementById("userList");
usersRef.on("child_added", snap => {
  let user = snap.val();
  let $h3 = document.createElement("h3");
  $h3.innerHTML = user.name;
  $h3.setAttribute("child-key", snap.key);
  $h3.addEventListener("click", userClicked)
  userListUI.append($h3);
});

function userClicked(e) {
  var userID = e.target.getAttribute("child-key");
  const userRef = dbRef.child('userInfo/' + userID);
  const userDetailUI = document.getElementById("userDetail");
  userDetailUI.innerHTML = ""
  userRef.on("child_added", snap => {
    var $p = document.createElement("p");
    $p.innerHTML = snap.key + " - " + snap.val()
    userDetailUI.append($p);
  });
}

var storage = firebase.storage();
var storageRef = storage.ref();
$('#List').find('tbody').html('');

var i = 0;
storageRef.child('users').listAll().then(function(result) {
  result.items.forEach(function(imageRef) {
    i++;
    displayImage(i, imageRef);
  });
});

function displayImage(row, images) {
  images.getDownloadURL().then(function(url) {
    // console.log(url);
    let new_html = '';
    // new_html += '<tr>';
    new_html += '<td>';
    // new_html += '</td>';
    // new_html += '<td>';
    new_html += '<img src= "' + url + '">';
    new_html += '</td>';
    // new_html += '</tr>';
    new_html += row;
    $('#List').find('tbody').append(new_html);
  });
}
<table id="List">
  <tbody>

  </tbody>
</table>

<br><br>

<ul id="userList"></ul>
<div id="userDetail">
  <p>
    <strong class="detailName"></strong>
  </p>
</div>

То, что я сделал, чтобы исправить: поиск в Google, игра с функцией отображения изображения (попытался переместить $ ('# List'). Find ('tbody'). append (new_ html); от 2-го до последнего});) добавьте что-нибудь к new_ html, чтобы отображать имена, но images.getDownloadURL портит другие вещи, которые я пробовал, потому что если я добавлю еще после или до него, я получу сообщение об ошибке, потому что изображения хранятся в хранилище, а информация о пользователе находится в базе данных в реальном времени. Есть указатели?

1 Ответ

0 голосов
/ 04 сентября 2020 
 var userData = docRef.collection("userInfo");
 usersRef.on("child_added", snap => {
     let user = snap.val();
     let $ul = document.createElement("ul");
     $ul.innerHTML = user.name;
     $ul.setAttribute("child-key", snap.key);
     $ul.addEventListener("click", userClicked) 
     userListUI.append($ul);
 });
 function userClicked(e) {
   var userID = e.target.getAttribute("child-key");
   const imageRef = storageRef.child('users/' + userID);
   const userRef = dbRef.child('userInfo/' + userID);
   // window.location = 'profileview.html';
   const userDetailUI = document.getElementById("userDetail");
   userDetailUI.innerHTML = "";
   userRef.on("child_added", snap => {
       var $ul = document.createElement("ul");
       $ul.innerHTML = snap.key + " - " + snap.val() 
       userDetailUI.append($ul);
   });
 }
...