Question

相关HTML部分

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

相关JS部分

    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;
            }
        });
    });

我的JS代码提取了我在VSTS存储中拥有的所有数据。 docs包含一个包含所有项目的对象。它会正确返回，并且items[i].name包含我要显示的正确值。

但这只是显示我的<div id="items">中的第一项，而不显示其余的。

这是正确的用法吗？

我该如何解决？

Answer 1

这个问题之所以出现，是因为您在循环的每次迭代中都设置了 items div的innerHTML；表示每次都会覆盖这些值，并且仅显示循环中设置的最后一个值。

一个简单的解决方案是在将值设置为 items div

时追加一个新元素

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

Answer 2

这里有2个版本，显示了执行此操作的不同方法。注意使用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');
  });
});

使用map函数数组方法的更紧凑的版本。但是请注意，这实际上比执行普通的for循环要慢一些，因为它会在每次迭代中执行一个函数。

VSS.getService(VSS.ServiceIds.ExtensionData).then((dataService) => {
  dataService.getDocuments('MyCollection').then((docs) => {
    // much more compact version using map. Note that while this is more compact, 
    // its slower than the for loop we did in the previous example
    document.getElementById('items').innerHTML = docs.map((item) => `<div>KPI Name : ${docs[i].name}</div>`).join('\n');
  });
});

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

2 个答案: