Блог

Я создаю систему друзей / подписчиков с помощью HTML и Firebase. Я создал страницу для добавления новых друзей. Когда я нажимаю кнопку «Добавить друга» (рисунок ниже), я хочу, чтобы серверная часть нашла документ в профиле в li, но я не знаю, как найти точный документ. Ниже вы также можете увидеть мою структуру Firestore.

Javascript:

 firebase.auth().onAuthStateChanged(function(user) {

    db.collection('users').get().then(function(snapshot) {
        console.log(snapshot.docs)
        setupFindFriends(snapshot.docs)
    })

    const findfriends = document.querySelector('.findfriends');

    const setupFindFriends = (data) => {

        let html = '';
        data.forEach(doc => {
            const friend = doc.data();
            const li = `
            <li>
                <div class="name">${friend.Fullname}</div>
                <img class="friendpfp" src="${friend.pfpURL}">
                <button class="addfriend">Add friend</button>
            </li>
            `;
            html  = li
        })

        findfriends.innerHTML = html;

    };

});
  

Макет Firestore

Вы должны передать идентификатор документа addFriend() функции. Что-то вроде следующих строк (непроверенных):

 firebase.auth().onAuthStateChanged(function(user) {

    db.collection('users').get().then(function(snapshot) {
        console.log(snapshot.docs)
        setupFindFriends(snapshot.docs)
    })

    const findfriends = document.querySelector('.findfriends');

    const setupFindFriends = (data) => {

        let html = '';
        data.forEach(doc => {
            const friend = doc.data();
            const li = `
            <li>
                <div class="name">${friend.Fullname}</div>
                <img class="friendpfp" src="${friend.pfpURL}">
                <button class="addfriend" onclick="addFriend('${friendId}')">Add friend</button>
            </li>
            `;
            html  = li
        })

        findfriends.innerHTML = html;

    };

});

function addFriend(friendId) {
    console.log(friendId);
 
    // Do something with friendId, e.g. create or update a Firestore doc, etc ... 
}