Javascript for循环中的getElementById仅显示第一项

相关HTML部分

<nav>
 <div class="create_button">+ Create KPI</div>
 <div id="items"></div>
</nav>

    VSS.getService(VSS.ServiceIds.ExtensionData).then(function(dataService) {
        // Get all document under the collection
        dataService.getDocuments("MyCollection").then(function(docs) {

            items = docs

            for(var i = 0; i < docs.length; i++) {
                console.log('doclen', docs.length)
                console.log(items[i].name)
                document.getElementById("items").innerHTML = "KPI Name : " + items[i].name;
            }
        });
    });

+创建KPI

相关JS部分

<nav>
 <div class="create_button">+ Create KPI</div>
 <div id="items"></div>
</nav>

    VSS.getService(VSS.ServiceIds.ExtensionData).then(function(dataService) {
        // Get all document under the collection
        dataService.getDocuments("MyCollection").then(function(docs) {

            items = docs

            for(var i = 0; i < docs.length; i++) {
                console.log('doclen', docs.length)
                console.log(items[i].name)
                document.getElementById("items").innerHTML = "KPI Name : " + items[i].name;
            }
        });
    });

VSS.getService（VSS.ServiceIds.ExtensionData）。然后（函数（dataService）{
//获取集合下的所有文档
dataService.getDocuments（“MyCollection”）。然后（函数（docs）{
项目=单据
对于（变量i=0；i

我的JS代码获取VSTS存储中的所有数据。

文档

包含一个包含所有项目的对象。它正确返回并且

items[i]。name

包含我要显示的正确值

但是这个只显示我的

中的第一项，而不是其余的

这是正确的用法吗

---

如何修复它？

由于您在循环中的每个迭代中都设置了items div的innerHTML，所以这些问题会发生；这意味着每次都会覆盖这些值，并且只显示循环中设置的最后一个值

一个简单的解决方案是在设置items div的值时附加一个新元素

for（变量i=0；i

由于您在循环的每次迭代中都设置了items div的innerHTML，所以会出现问题；这意味着每次都会覆盖这些值，并且只显示循环中设置的最后一个值

一个简单的解决方案是在设置items div的值时附加一个新元素

for（变量i=0；i

以下两个版本展示了不同的方法。注意使用es6样式的代码中的更改

VSS.getService(VSS.ServiceIds.ExtensionData).then((dataService) => {
  dataService.getDocuments('MyCollection').then((docs) => {
    // keep a reference to the element instead of searching for it in each loop.
    const itemsDiv = document.getElementById('items');
    const contents = [];

    for (let i = 0; i < docs.length; i++) {
      // using template strings here to show you another way of working with strings in es6
      contents.push(
        `<div>KPI Name : ${docs[i].name}</div>`
      )
    }

    // finally update the target element one time with your contents. 
    // The new line character isn't required, can just use '', but this might be easier to read for you
    itemsDiv.innerHTML = contents.join('\n');
  });
});

---

这里有两个版本展示了不同的方法。注意使用es6样式的代码中的更改

VSS.getService(VSS.ServiceIds.ExtensionData).then((dataService) => {
  dataService.getDocuments('MyCollection').then((docs) => {
    // keep a reference to the element instead of searching for it in each loop.
    const itemsDiv = document.getElementById('items');
    const contents = [];

    for (let i = 0; i < docs.length; i++) {
      // using template strings here to show you another way of working with strings in es6
      contents.push(
        `<div>KPI Name : ${docs[i].name}</div>`
      )
    }

    // finally update the target element one time with your contents. 
    // The new line character isn't required, can just use '', but this might be easier to read for you
    itemsDiv.innerHTML = contents.join('\n');
  });
});

---

由于您只能有一个具有相同ID的DOM元素，因此在循环中，您要做的是每次迭代时替换#项的内容。@Geuis显示多个项的好方法是什么？

createElement

应该有用，因为您只能有一个具有相同ID的DOM元素，您在循环中所做的是每次迭代时替换#项的内容。@Geuis显示多个项的好方法是什么？

createElement

应该有用看起来很棒！如果我想创建一个样式化的列表项，我是否只需要将类名添加到

KPI名称：${docs[I].Name}）.join（'\n'）并设置我想要的任何样式？对，我们在这两种情况下所做的都是构建一个html字符串，然后使用
innerHTML
一次性设置。因此，如果您想创建无序列表，您可以将#items元素更改为
ul
，然后将字符串模板中的
div
更改为
li
。这是正确的设计吗？实际上，我更擅长使用React，您可以为单个列表项创建一个组件并重用它。看起来这个纯javascript做了类似的工作，但是将所有
HTML
组件放在javascript中是一个好的设计吗？啊，如果你试图在React中构建它，这是完全错误的方法。这就是你用vanilla js的方式。您绝对不想在React中使用这种方法，因为它在React的控制之外修改DOM。好的，那么您的答案在设计方面是否是一种好的方法（代码结构，方法）？看起来很棒！如果我想创建一个样式化的列表项，我是否只需要将类名添加到
KPI名称：${docs[I].Name}）.join（'\n'）并设置我想要的任何样式？对，我们在这两种情况下所做的都是构建一个html字符串，然后使用
innerHTML
一次性设置。因此，如果您想创建无序列表，您可以将#items元素更改为
ul
，然后将字符串模板中的
div
更改为
li
。这是正确的设计吗？实际上，我更擅长使用React，您可以为单个列表项创建一个组件并重用它。看起来这个纯javascript做了类似的工作，但是将所有
HTML
组件放在javascript中是一个好的设计吗？啊，如果你试图在React中构建它，这是完全错误的方法。这就是你用vanilla js的方式。您绝对不想将此方法用于React，因为它在React的控制之外修改DOM。好的，那么您的答案在设计方面是否是一个好的方法（代码结构、方法）？