JavaScript对象声明生成[object Object]，API数据处理问题求助

嘿，这个问题的根源其实很简单——你把变量的类型搞混啦！

核心错误：变量类型不匹配 #

你把htmlString初始化成了new Object()（一个对象），但你实际需要的是用来拼接HTML的字符串。当你尝试用+=把HTML片段拼到对象上时，JavaScript会自动把对象转换成字符串形式，也就是你看到的[object Object]，这自然就没法正常渲染内容，也没法在控制台访问正确的数据。

另外你的代码还有个小语法错误：每个拼接行末尾多了个分号，这会导致语法报错，得去掉。

修正后的代码 #

function renderHTML(data) { 
  // 初始化空字符串，而不是对象
  let htmlString = ''; 
  for (let i = 0; i < data.length; i++) { 
    htmlString += "<p>" + data[i].name + "</p>";
    htmlString += "<p>" + data[i].flag + "</p>";
    htmlString += "<p>" + data[i].translations.de + "</p>";
    htmlString += "<p>" + data[i].translations.es + "</p>";
  } 
  countryContainer.insertAdjacentHTML('beforeend', htmlString);
}

进阶优化建议 #

为了让代码更简洁易读，推荐使用ES6的模板字符串（反引号`包裹），避免繁琐的字符串拼接：

function renderHTML(data) { 
  let htmlString = ''; 
  for (let i = 0; i < data.length; i++) { 
    htmlString += `
      <p>${data[i].name}</p>
      <p>${data[i].flag}</p>
      <p>${data[i].translations.de}</p>
      <p>${data[i].translations.es}</p>
    `;
  } 
  countryContainer.insertAdjacentHTML('beforeend', htmlString);
}

这样修改后，htmlString会正确累积HTML片段，插入到DOM后就能正常显示内容，控制台也能正常访问相关数据啦。

内容的提问来源于stack exchange，提问作者Noobydee