javascript - textContent 对象属性不起作用

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 而不是“轨道”、“歌曲”等...

你知道为什么吗？

谢谢

Answer 1

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

"isStreamable":true

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

建议连接先前的值，例如:

div.textContent += separator + myObj[key]

哪里separator可能是<br> , \n或任何您认为合适的字符串。

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