使用 Firebase Firestore 为 Javascript 中每个动态创建的行分配一个文档 ID答案

【问题标题】：Assign an Document ID to each dynamically created row in Javascript using Firebase Firestore使用 Firebase Firestore 为 Javascript 中每个动态创建的行分配一个文档 ID
【发布时间】：2019-12-28 12:02:02
【问题描述】：

我正在从 Firebase Firestore 检索数据并将集合中保存的每个文档作为表格行输出。例如，在用户集合中，每个文档都是不同的用户。因此，每一行代表一个不同的用户。

我想实现编辑功能，这样如果您单击一行，就可以专门编辑该文档。我不知道该怎么做。

 function getData() {
      var table = document.getElementById("user-list-table");
      var index = 0;
      db.collection("users").get().then(function (querySnapshot) {
        querySnapshot.forEach(function (doc) {
          index++;
          var row = table.insertRow(index);
          var documentID = row.insertCell(0);
          var firstName = row.insertCell(1);
          var lastName = row.insertCell(2);
          var emailAddress = row.insertCell(3);
          var editbutton = row.insertCell(4);
          var deletebutton = row.insertCell(5);
          documentID.innerHTML = doc.id;
          firstName.innerHTML = doc.data().firstName;
          lastName.innerHTML = doc.data().lastName;
          emailAddress.innerHTML = doc.data().emailAddress;
          editbutton.innerHTML = '<button type="button" data-toggle="modal" data-target="#editModal" class="btn btn-primary btn-sm">Edit</button>'
          deletebutton.innerHTML = '<button type="button" onclick="deleteBanner()" class="btn btn-danger btn-sm">Delete</button>';
        });
      });
    }

【问题讨论】：

标签： javascript html firebase web google-cloud-firestore

【解决方案1】：

有很多方法可以解决这个问题。我认为最简单的方法是，假设您在 documentID 变量中分配了您要编辑的文档的 ID，将您的编辑按钮更新为：

editbutton.innerHTML = '<button type="button" data-toggle="modal" data-target="#editModal" class="btn btn-primary btn-sm" onClick="'+ editUser(documentID) +'">Edit</button>'

我们所做的是向您的编辑按钮添加一个 onclick 事件，并通过更新一个名为 id 的隐藏输入来分配一个在您的编辑表单中传递文档 id 的函数。函数如下所示：

function editUser(documentID) {
    document.getElementById("user-id").value = documentID;
}

输入看起来像这样：

<input type="hidden" name="id" id="user-id" />

要添加新用户，您可以将“0”作为文档ID 传递并在后端进行相应的处理。

【讨论】：