javascript - 无法遍历所有 JSON 数组和对象

Question

我需要它循环遍历从服务器以 JSON 形式接收的标签数组，并显示每个标签的名称和 secret 性。当我将 JSON 记录到控制台时，它会在其 tags 属性中显示大量信息。但它只是向 DOM 添加一个标签。

.done(function(data) {
    var obj = JSON.parse(JSON.stringify(data, null, 2));

    for (i = 0; i < obj.tags.length; i++){
      document.getElementById("tags-collection").innerHTML = '<a href="#!" class="collection-item"><span class="new badge red">'+ obj.tags[i].confidence +" %"+'</span>'+ obj.tags[i].name +'</a>';
    }
});

Answer 1

那是因为你重复了这一行

document.getElementById("tags-collection").innerHTML =

循环。意味着在您更改的每次迭代中，修改 #tags-collection 元素的innerHTML。

尝试附加内容，例如

insertAdjacentHTML("beforeend", someContent)

喜欢:

for (i = 0; i < obj.tags.length; i++){
  var someContent = '<a href="#!" class="collection-item"><span class="new badge red">'+ obj.tags[i].confidence +" %"+'</span>'+ obj.tags[i].name +'</a>';
  document.getElementById("tags-collection").insertAdjacentHTML("beforeend", someContent); 
}

更高效的方法是进行字符串连接并仅插入一次:

var HTML = "";

for (i = 0; i < obj.tags.length; i++){
  HTML += '<a href="#!" class="collection-item"><span class="new badge red">'+ obj.tags[i].confidence +" %"+'</span>'+ obj.tags[i].name +'</a>';
}

// finally:
document.getElementById("tags-collection").innerHTML = HTML;

const obj = {};
obj.tags = [
  {confidence:"12", name: "bar"},
  {confidence:"32", name: "foo"},
  {confidence:"66", name: "zoo"}
];

let HTML = "";

obj.tags.forEach((ob) => (
HTML += `<a href="#!" class="collection-item"><span class="new badge red">${ob.confidence}% </span> ${ob.name}</a><br>`
));

// finally:
document.getElementById("tags-collection").innerHTML = HTML;

.red{color:red;}

<div id="tags-collection"></div>