无法通过innerHTML展示API返回数据，页面显示[object]错误求助

问题根源 #

你直接将API返回的data赋值给innerHTML，但该API返回的是包含单个名言对象的数组。当你把对象/数组直接转为字符串时，浏览器会默认输出[object Object]（或[object Array]），这就是页面显示[object]的原因。

解决步骤 #

1. 确认API返回结构
   该API返回的数据结构为长度1的数组，每个元素是包含名言信息的对象，示例如下：

   [
     {
       "quote": "教育的根是苦的，但其果实是甜的。",
       "author": "亚里士多德",
       "category": "education"
     }
   ]
   

2. 修改代码提取并渲染数据
   需要先从数组中取出目标对象，再提取quote和author字段，拼接成可读的HTML内容：

   const quote = document.querySelector("#quotes")
   const btn = document.querySelector("#quotesBtn")
   
   const quotes = () => {
     const setHeaders = {
       headers: {
         'X-RapidAPI-Key': '你的API密钥', // 务必补充你的API密钥
         'X-RapidAPI-Host': 'famous-quotes4.p.rapidapi.com'
       }
     }
     fetch('https://famous-quotes4.p.rapidapi.com/random?category=education&count=1', setHeaders)
       .then(response => response.json())
       .then(data => {
         // 取出数组中的第一个名言对象
         const quoteItem = data[0];
         // 拼接成带格式的HTML
         quote.innerHTML = `<p>${quoteItem.quote}</p><p style="text-align:right; margin-top:10px;">— ${quoteItem.author}</p>`;
       })
       .catch(err => console.error('请求出错：', err)); // 打印错误便于调试
   }
   
   btn.addEventListener("click", quotes);
   quotes();
   

额外注意事项 #

• 必须填充X-RapidAPI-Key的具体值，否则API请求会被拒绝
• 建议保留catch中的错误打印，方便排查请求失败的问题
• 可根据需求调整innerHTML的HTML结构，适配页面样式

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