Fetch API获取PHP返回JSON数据异常，输出[object Object]求助

你遇到的问题根源很明确：当你直接把books数组（里面包含对象）和字符串拼接时，JavaScript会默认调用对象的toString()方法，结果就会输出[object Object]，这才导致你看到name1 [object Object], [object Object]这样的奇怪输出。下面是具体的修正方案：

1. 先确保Fetch正确解析JSON响应 #

首先你的Fetch代码可能没完整处理JSON解析流程，完整的异步处理应该是这样的：

window.onload = Send;

function Send() {
  const buttonSend = document.getElementById('你的按钮ID'); // 替换成实际的按钮ID
  buttonSend.addEventListener('click', async () => {
    try {
      // 发起请求到你的PHP页面
      const response = await fetch('你的PHP页面地址');
      // 检查请求是否成功
      if (!response.ok) {
        throw new Error(`请求失败！状态码: ${response.status}`);
      }
      // 关键步骤：把响应解析为JSON对象
      const data = await response.json();
      // 调用展示函数处理数据
      showData(data);
    } catch (error) {
      console.error('获取数据出错:', error);
    }
  });
}

2. 正确处理books数组的展示逻辑 #

接下来写一个专门的展示函数，提取数组里的具体属性来生成可读内容：

function showData(data) {
  // 提取每本书的标题，用逗号拼接成字符串
  const bookList = data.books.map(book => book.title).join(', ');
  // 如果需要同时显示ID和标题，可以改成：
  // const bookList = data.books.map(book => `《${book.title}》(ID: ${book.id})`).join('; ');
  
  // 输出到控制台或者页面
  console.log(`${data.name} ${bookList}`);
  // 如果要显示在页面元素里：
  // document.getElementById('结果容器ID').textContent = `${data.name} 的藏书：${bookList}`;
}

为什么之前会出错？ #

举个错误示例，如果你之前的代码是这样的：

// 错误写法
console.log(data.name + ' ' + data.books);

这里data.books是一个包含两个对象的数组，直接和字符串拼接时，数组会调用toString()方法，把每个对象转成默认的[object Object]，最终就出现了你看到的奇怪输出。而用map遍历数组提取属性，再用join拼接，就能得到清晰可读的内容了。

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