textContent 对象属性不起作用

Posted 2023-05-07

【中文标题】textContent 对象属性不起作用

【英文标题】：textContent object property doesn't work

【发布时间】：2018-11-07 05:57:30

【问题描述】：

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

【参考方案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;

<div id="test">It is a test</div>

---

您可以使用它而不是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];
);

<div id="container"></div>

【参考方案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)