javascript - javascript - 如何从查询列表（来自 Firestore）中获取点击文档的 ID？

Question

我想在这个Onclick 界面视频中实现一个可点击的 Firestore 列表，但我无法使用 javascript for web。这是我尝试过的：

这是来自https://cloud.google.com/firestore/docs/query-data/get-data的查询示例。

db.collection("cities").where("capital", "==", true)
.get()
.then(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
        console.log(doc.id, " => ", doc.data());
        var id = doc.data().id;
        var templ = "";
        templ = 
        "Id: "+id+"<br>";
        document.getElementById("cities-list").innerHTML += templ;  
    });
})

我可以在 div 中显示查询，但是如何将按钮或可单击的 div （如按钮 onclick 部分）附加到每一行，我将使用它获取单击项目的 id 并将此 id 写入 div 像这样 document.getElementById("result-list").innerHTML = doc.id？像这样的按钮部分给我错误的元素关闭错误。

templ = 
"Id: "+id+"<br>"+
"<button onclick='getElementById('cityDetail').innerHTML="+ id +"'>Set clicked city</button><br>";
document.getElementById("cities-list").innerHTML += templ;

我是一个初学者，谢谢你的任何提示。

标签： javascriptgoogle-cloud-firestoreonclick

Answer 1

db.collection("cities").where("capital", "==", true)
.get()
.then(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
        console.log(doc.id, " => ", doc.data());
        var uid = doc.data().uid;
        var name = doc.data().name;
        var templ = "";
        templ = 
        `'Uid:' ${uid} '<br>'
        `'Name:' ${name} '<br>'`;
        document.getElementById("cities-list").innerHTML += templ;  
    });
})
.catch(function(error) {
    console.log("Error getting documents: ", error);
});