User specific info Profile pic display I fixed a ton of bugs I had before. Goal: Dynamically display all signed up users with their names displayed under their profile pic. What it does now: Dynamically displays all users(when you click it shows specific user info) and profile pics in seperate divs. Image:Dynamic images displayed Snippet:
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>
What I've done to try to fix:Googling, playing around with the display image function (tried moving the $('#List').find('tbody').append(new_html); below the 2nd to last });) add something to the new_html to display names but the images.getDownloadURL messes the other stuff I tried because if I add another function after or before it, I'll get an error because the images are stored in storage and the user info is in realtime database. Any pointers?
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);
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.