如何在浏览器中展示已解码的API JSON数据 仅显示最后字段怎么解决

问题根因 #

• 调用jQuery的.html()方法时会覆盖容器内所有原有内容，每轮渲染字段都会清空之前的输出，最终只剩最后一次渲染的内容
• 数组遍历误用了filter方法，filter是用于筛选数组返回新数组的API，单纯遍历数组应该使用forEach
• .html()仅支持传入1个内容参数，你传入的第二个参数obj[prop]会被直接忽略，实际渲染内容缺失字段值

修复后的渲染逻辑代码 #

// 先清空容器原有内容，避免多次点击重复叠加
$('#data').empty()
// 用forEach遍历数组元素
data.forEach(item => {
  iterateObject(item);
  // 每条数据渲染完加分隔线，提升可读性
  $('#data').append('<hr>')
});

function iterateObject(obj){
  for(prop in obj){
    if (typeof(obj[prop]) == "object") {
      iterateObject(obj[prop]);
    } else {
      if (["Name", "Location", "History", "Active"].includes(prop)) {
        // 用append追加内容，拼接完整内容串后传入
        $('#data').append(`<p>${prop.toUpperCase()}: ${obj[prop]}</p>`);
      }
    }
  }
}

可选简化方案 #

如果你不需要拆分字段渲染，想要直接展示格式化后的完整JSON结构，可以用更简洁的实现：

// 用pre标签保留JSON缩进格式
$('#data').html(`<pre>${JSON.stringify(data, null, 2)}</pre>`)

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