如何显示对象信息而非输出[object Object]？表单数据展示求助

核心原因 #

[object Object]是JavaScript中直接输出对象时的默认字符串表示，说明你大概率是直接将书籍对象插入到DOM中，而没有提取对象内的具体属性（如书名、作者、ISBN等）进行展示。

修复方案 #

1. 提取对象属性拼接展示字符串 #

假设你的书籍数据对象结构为{title: "书名", author: "作者", isbn: "ISBN号"}，可以手动提取属性拼接成HTML字符串插入DOM：

// 假设已收集好的书籍数据对象为bookData
const bookHtml = `
  <div class="book-card">
    <h4>${bookData.title}</h4>
    <p>作者：${bookData.author}</p>
    <p>ISBN：${bookData.isbn}</p>
  </div>
`;
// 将内容插入到展示区域
document.querySelector('.display-area').innerHTML = bookHtml;

2. 先调试确认对象结构 #

如果不确定书籍对象的具体属性，可以先将对象转为JSON字符串输出，查看内部结构：

// 打印到控制台查看
console.log(bookData);
// 或者在页面展示结构化的JSON
document.querySelector('.display-area').textContent = JSON.stringify(bookData, null, 2);

确认属性后再针对性提取展示。

3. 检查表单数据收集是否正确 #

确保你从表单获取的是输入框的值，而非DOM元素对象：

// 错误：获取到的是input元素对象
const title = document.getElementById('book-title');
// 正确：获取输入框的文本值
const title = document.getElementById('book-title').value;

排查要点 #

• 检查表单提交处理函数，确认收集的书籍数据是包含属性的对象，而非混入DOM元素。
• 查看DOM插入代码，是否直接将对象赋值给innerHTML/textContent，未做字符串转换。
• 用console.log()打印书籍对象，确认属性和值是否符合预期。

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