在 For 循环中使用按钮单击更新从 Firestore 返回的值答案

【问题标题】：Using Button Click to Update Values Returned from Firestore in For Loop在 For 循环中使用按钮单击更新从 Firestore 返回的值
【发布时间】：2019-09-25 23:31:00
【问题描述】：

我目前有一个基本的 CRUD 网站，我最近开始致力于列出一些产品和相关价格。我的技能不是最好的，但我正在打一场精彩的比赛，并且希望获得一些帮助/指导来实现我想要实现的目标。

我将数据存储在 Firestore 数据库中，并将其拉出并显示在列表中。为了显示它，我将子集合中的值添加到数组中，然后我使用 for 循环循环并提取每个值并使用 html 模板字符串显示它。我决定，由于我有一个不错的创建和显示方面，我想添加一个按钮（或者在我的情况下是一个图标），它可以让我编辑每个返回的值。

    const shelf = doc.data();
    doc.ref.collection("products").get().then((Snapshot) => {
        const products = Snapshot.docs.map(doc => doc.data());


        // start of for loop
        for(let product of products){

        // start of template string inside backticks
        const li = `
            <p><div>${product.name} <div class="right"><font class=pink-text>Price:</font> $${product.price}  <a href="#" class="grey-text modal-trigger" data-target="modal-priceedit"><i class="material-icons">create</i></a></div></div></p>
        `;
        // end of template string inside backticks  

        html += li;                 


        // start of edit price section
        let price = product.price;                  

        const priceeditForm = document.querySelector('#priceedit-form');
        priceeditForm.addEventListener('submit', (e) => {
          e.preventDefault();

            console.log("Document with ID: ", doc.id);
            doc.ref.collection("vendors").doc(price)get().then((Snapshot) => {
                const priceedit = Snapshot.docs.map(doc => doc.data());
             price: priceeditForm['price'].value

            }).then(() => {
            // close the signup modal & reset form
            const modal = document.querySelector('#modal-priceedit');
            M.Modal.getInstance(modal).close();
            priceeditForm.reset();
          }).catch(err => {
            console.log(err.message);
          });
        });
        //end of edit price section 


        }
       // end of for loop           


        productList.innerHTML = html;           
        });

我希望当点击图标时，会弹出一个模型，其中包含一个价格输入字段，我可以输入新价格并提交它，从而更新数据库中的值。

我将非常感谢任何可以帮助我的人。提前谢谢你。

Output Image

【问题讨论】：

您能否再次检查代码格式是否完好无损？例如，看起来有些数据是对齐的，因此 for 循环只打印 4 console.logs 然后结束。
感谢您的回复。 console.log 就在那里，所以我可以确保它正在提取我需要的值。因此 for 循环获取返回的名为 products 的数组（ [{name, price}, {name, price}] ），然后从中提取值并在 html 中添加值，因为它围绕 ${product.name 循环} 价格：$${product.price}。

标签： javascript html for-loop button google-cloud-firestore

【解决方案1】：

感谢所有为此提供帮助的人。我决定使用 DOM 元素从头开始重做我的代码来 appendChild。一旦完成，这让一切都变得容易多了。决定对其进行更改，以使自己在代码方面具有更大的灵活性。

【讨论】：