textContent属性失效：循环对象属性赋值div文本得到true而非预期值

AI 小北

2026-5-29

问题分析与解决方案

嘿，我来帮你看看这个问题～

问题核心原因

你的代码里嵌套了两层循环，这直接导致了结果不符合预期：

外层循环 for (var i = 0; i < Object.keys(myObj).length; i++) 会创建与对象属性数量相同的div元素
内层的 for (let key in myObj) 会遍历对象的所有属性，并且每次都会把当前div的textContent覆盖成当前属性的值。最终每个div都会被设置为对象最后一个属性的内容——如果这个属性的值刚好是true，就会出现你看到的结果。

修正后的代码

你需要去掉多余的外层循环，直接遍历对象的每个属性，为每个属性单独创建div并设置内容：

var container = document.getElementById("grid-container");
var btn = document.getElementById("btn");
var div;
var request; // 这里修正了拼写错误：reuqest → request

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);
  
  // 直接遍历对象的每个属性，为每个属性创建对应的div
  for (let key in myObj) {
    // 确保只遍历对象自身的属性，避免原型链上的无关属性
    if (myObj.hasOwnProperty(key)) {
      div = document.createElement("div");
      div.className = "grid-item";
      // 可以同时显示属性名和值，更直观（也可以只保留 myObj[key]）
      div.textContent = `${key}: ${myObj[key]}`;
      container.appendChild(div);
    }
  }
}

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