Question

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而不是＆＃34; track＆＃34;，＆＃34; song＆＃34;等...

你知道为什么吗？

由于

Answer 1

像这样更新innerHTML div而不是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>

Answer 2

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

保存keys循环中myObj循环的for列表...

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

您可以使用索引key获取每次迭代的i，而无需额外的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);
    }   
}

Answer 3

该回复中每个对象的最后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

的回复示例

Answer 4

当你用于

时，你在这里没有很好地循环对象

您最好使用以下语法：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)
}

textContent对象属性不起作用

4 个答案: