textContent 对象属性不起作用答案

【问题标题】：textContent object property doesn't worktextContent 对象属性不起作用
【发布时间】：2023-03-12 11:56:01
【问题描述】：

var container = document.getElementById("grid-container");
var btn = document.getElementById("btn");
var div;
var reuqest;

function HTTPRequest(url) {
        request = new XMLHttpRequest();
        request.open('GET', url);
        request.onload = function() {
            result(request);            
        };
        request.send();
}

function result(data){
        var res = JSON.parse(data.responseText);
        var array = res.results;
        var myObj = array[0];
        console.log(myObj);
        for (var i = 0; i < Object.keys(myObj).length; i++) {
            div = document.createElement("div");
            div.className = "grid-item";
            container.appendChild(div); 
            for (let key in myObj) {
                console.log(myObj[key]);
                div.textContent = myObj[key];
            }
        }   
}

btn.addEventListener('click', function() {
    HTTPRequest('https://itunes.apple.com/search?term=jack+johnson','author');
});

我正在尝试遍历对象的所有属性，并为我创建的 div 提供上面对象的每个属性的文本内容。

由于某种原因，我得到：

true 而不是“track”、“song”等...

你知道为什么吗？

谢谢

【问题讨论】：

请发Minimal, Complete, and Verifiable example
循环的每次迭代都会完全重新分配textContent，替换之前设置的任何文本。从myObj 循环访问的最后一个值似乎是布尔值。也许使用+= 将值连接在一起。
你是想把所有的值串联在div中，还是把obj中的每个值都给每个div？
@RonnWilder 我希望每个属性值都填充每个 div，但我知道现在设置它会重复每个 div

标签： javascript loops object innerhtml

【解决方案1】：

该响应中每个对象的最后一个 key-value 对是：

"isStreamable":true

因此，当您按照 div.textContent = myObj[key] 为该 div 分配值时，您将丢失之前分配的值。

建议将之前的值连接起来，例如：

div.textContent += separator + myObj[key]

separator 可以是 <br>、\n 或任何您认为合适的字符串。

这是来自https://itunes.apple.com/search?term=jack+johnson的回复示例

【讨论】：

【解决方案2】：

像这样更新 div 的 innerHTML 而不是 textContent 并将 = 运算符更改为 +=。

var myObj = {
  wrapperType: "track",
  kind: "song",
  artistId: 909253,
  collectionId: 879273552,
  trackId: 879273565
}

var div = document.getElementById("test");
var content = ""
for (let key in myObj) {
  content += key + ": " + myObj[key] + "<br>";
}

div.innerHTML = content;

&lt;div id="test"&gt;It is a test&lt;/div&gt;

您可以使用它而不是for(let ... in ...)（根据@Jonathan-Lonowski 的回答）

let myObj = {
  wrapperType: "track",
  kind: "song",
  artistId: 909253,
  collectionId: 879273552,
  trackId: 879273565
},
container = document.getElementById("container");

Object.entries(myObj).forEach(function(itm) {
  div = document.createElement("div");
  div.className = "grid-item";
  container.appendChild(div);
  div.textContent = itm[0] + ": " + itm[1];
});

&lt;div id="container"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

如果您尝试为myObj 的每个键/值附加一个div，则不必使用两个循环来遍历键。

保存myObj 中for 循环正在迭代的keys 列表……

var keys = Object.keys(myObj);
for (var i = 0; i < keys.length; i++) {
    // ...
}

您可以使用索引i 为每次迭代获取key，而无需额外的for..in 循环：

var key = keys[i];
div.textContent = myObj[key];

综合：

function result(data){
    var res = JSON.parse(data.responseText);
    var array = res.results;
    var myObj = array[0];
    var keys = Object.keys(myObj);
    for (var i = 0; i < keys.length; i++) {
        var key = keys[i];
        div = document.createElement("div");
        div.className = "grid-item";
        div.textContent = myObj[key];
        container.appendChild(div);
    }   
}

【讨论】：

嘿，谢谢。 for (let key in myObj) { div = document.createElement("div"); div.className = "网格项"; container.appendChild(div); console.log(myObj[key]); div.textContent = myObj[key]; }
正如大家所建议的，我已经为每个键创建了 div，然后将它们添加到属性的值中。谢谢大家的帮助

【解决方案4】：

当你使用 for 时，你在这里的对象上循环不好

你最好使用这个语法：https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/keys

Object.keys(myObj).map((key) => {
    console.log(myObj[key], key)
}

或

Object.keys(myObj).map(function (key) {
    console.log(myObj[key], key)
}

【讨论】：