调用Marvel API渲染嵌套数组时出现[object, object]问题求助

我太懂你这种困扰了！你已经能成功获取并渲染英雄的基础信息，但碰到urls、series、comics这类嵌套数组时，直接输出就变成了[object, object]——这是因为JavaScript没法直接把对象数组转换成人类可读的内容，得专门对这些嵌套数组做遍历处理才行。

问题根源 #

你看，比如comic.urls是一个对象数组，每个元素都包含type和url属性；而series、comics、events这类集合，在Marvel API里是存在items字段下的对象数组。直接把这些数组塞进模板字符串，JS会默认调用数组的toString()方法，结果就成了[object, object]。

解决办法：嵌套使用map遍历 #

我们只需要对每个嵌套数组单独用map遍历，提取需要的字段，再把结果拼接成HTML字符串就行。我帮你修改了代码，同时还修正了原代码里的语法小错误：

document.querySelector("button").addEventListener("click", fetchGetSuper)

function fetchGetSuper() {
  const superChoice = document.querySelector("input").value
  const imageSize = "standard_fantastic"
  // 请替换成你的Marvel API完整请求URL（包含密钥）
  fetch(`https://gateway.marvel.com/v1/public/characters?name=${superChoice}&apikey=你的API密钥`)
    .then(response => {
      if (!response.ok) {
        throw Error("ERROR");
      }
      return response.json();
    })
    .then(data => {
      console.log(data.data.results);
      var html = data.data.results.map(comic => {
          // 处理urls数组，生成可点击的链接列表
          const urlItems = comic.urls.map(url => `
            <li><a href="${url.url}" target="_blank">${url.type}</a></li>
          `).join("");
          
          // 处理所属系列集合
          const seriesItems = comic.series.items.map(series => `
            <li>${series.name}</li>
          `).join("");
          
          // 处理关联漫画集合
          const comicItems = comic.comics.items.map(item => `
            <li>${item.name}</li>
          `).join("");
          
          // 处理参与事件集合
          const eventItems = comic.events.items.map(event => `
            <li>${event.name}</li>
          `).join("");
          
          return `<div class="comics">
                    <p>Name: ${comic.name} </p>
                    <p>Description: ${comic.description || "暂无描述"} </p>
                    <img src="${comic.thumbnail.path}/${imageSize}.${comic.thumbnail.extension}" alt="${comic.name}">
                    
                    <h3>相关链接</h3>
                    <ul>${urlItems}</ul>
                    
                    <h3>所属系列</h3>
                    <ul>${seriesItems || "<li>暂无系列信息</li>"}</ul>
                    
                    <h3>关联漫画</h3>
                    <ul>${comicItems || "<li>暂无漫画信息</li>"}</ul>
                    
                    <h3>参与事件</h3>
                    <ul>${eventItems || "<li>暂无事件信息</li>"}</ul>
                 </div>`;
        })
        .join("")
      console.log(html);
      document.querySelector(`#cards`).insertAdjacentHTML("afterbegin", html);

    })
    .catch(error => {
      console.log(error);
    });
}

关键改动说明 #

• 针对每个嵌套数组（urls、series.items等）单独使用map生成对应的HTML列表项，再用join("")把数组转换成字符串；
• 给description和空集合加了默认值，避免页面出现undefined的尴尬内容；
• 修正了原代码里多余的闭合括号错误，同时补充了API请求的URL结构（记得替换成你的实际API密钥）；
• 给urls里的链接加上了<a>标签，让它可以直接点击访问。

你可以把这段代码替换成你原来的JS代码，再测试一下，应该就能正常显示所有嵌套集合的内容啦！

备注：内容来源于stack exchange，提问作者Pauly Contreras