新手求助：如何用JavaScript将API响应转为HTML卡片？

直接上实操步骤和代码，你可以照着调整：

1. 明确数据结构 #

你拿到的API返回数据格式如下：

{"title": "Bari Bari Densetsu","id": "bari-bari-densetsu","episode": "2","episode_id": "bari-bari-densetsu-episode-2","subOrdub": "SUB","image_url": "https://gogocdn.net/cover/bari-bari-densetsu.png"}

2. 编写卡片渲染函数 #

核心逻辑是通过JS创建DOM元素，把数据填充进去后组装成卡片：

// 模拟API返回的数据（实际开发替换为接口请求结果）
const animeData = {
  "title": "Bari Bari Densetsu",
  "id": "bari-bari-densetsu",
  "episode": "2",
  "episode_id": "bari-bari-densetsu-episode-2",
  "subOrdub": "SUB",
  "image_url": "https://gogocdn.net/cover/bari-bari-densetsu.png"
};

// 创建卡片的工具函数
function createAnimeCard(data) {
  // 创建卡片外层容器
  const card = document.createElement('div');
  card.className = 'anime-card';
  // 内联样式仅作演示，实际建议写在外部CSS文件中
  card.style.cssText = `
    width: 280px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    background: #fff;
    margin: 1rem;
  `;

  // 添加封面图元素
  const coverImg = document.createElement('img');
  coverImg.src = data.image_url;
  coverImg.alt = `${data.title} 封面`;
  coverImg.style.width = '100%';
  coverImg.style.height = '180px';
  coverImg.style.objectFit = 'cover';
  card.appendChild(coverImg);

  // 创建卡片内容区域
  const contentWrap = document.createElement('div');
  contentWrap.style.padding = '12px';
  card.appendChild(contentWrap);

  // 添加标题
  const title = document.createElement('h3');
  title.textContent = data.title;
  title.style.margin = '0 0 8px';
  title.style.fontSize = '16px';
  contentWrap.appendChild(title);

  // 添加剧集信息
  const episodeText = document.createElement('p');
  episodeText.textContent = `第 ${data.episode} 话`;
  episodeText.style.margin = '0 0 8px';
  episodeText.style.color = '#666';
  episodeText.style.fontSize = '14px';
  contentWrap.appendChild(episodeText);

  // 添加字幕标识
  const subTag = document.createElement('span');
  subTag.textContent = data.subOrdub;
  subTag.style.padding = '4px 8px';
  subTag.style.borderRadius = '4px';
  subTag.style.background = '#e3f2fd';
  subTag.style.color = '#1976d2';
  subTag.style.fontSize = '12px';
  contentWrap.appendChild(subTag);

  return card;
}

3. 将卡片插入页面 #

先在HTML中准备一个容器，再把创建好的卡片添加进去：

<!-- 页面中用于放置卡片的容器 -->
<div id="card-container"></div>

// 获取容器并插入卡片
const container = document.getElementById('card-container');
const newCard = createAnimeCard(animeData);
container.appendChild(newCard);

4. 真实API请求的处理方式 #

如果是从真实接口获取数据，用fetch处理即可：

fetch('你的API接口地址')
  .then(res => res.json())
  .then(apiData => {
    const card = createAnimeCard(apiData);
    document.getElementById('card-container').appendChild(card);
  })
  .catch(err => console.log('数据请求失败:', err));

额外提示 #

• 样式尽量写在外部CSS文件中，避免内联样式，方便统一维护
• 可以给图片添加onerror事件，处理图片加载失败的情况（比如显示默认封面）
• 如果需要渲染多个卡片，只需遍历数据数组，循环调用createAnimeCard函数即可

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