TypeScript 如何从 API 响应对象提取指定键值对用于 HTML 渲染

1. 定义API响应的TS类型 #

为了保证类型安全，优先给返回的JSON结构定义TS接口：

interface PokemonResponse {
  tier: string;
  pokemon: string;
  rank: string;
  usage: string;
  raw: string;
  // 能力字段是键为字符串、值为百分比字符串的对象
  abilities: Record<string, string>;
  moves: Record<string, string>;
}

2. 提取目标键值对 #

因为目标键Cursed Body包含空格，不能用点语法访问，需要用方括号语法取值：

// 示例：发起请求获取响应
async function getCursedBodyValue() {
  try {
    const res = await fetch('你的API接口地址');
    const data: PokemonResponse = await res.json();
    // 提取目标值，加可选链避免字段不存在时报错
    const cursedBodyRate = data.abilities?.["Cursed Body"];
    return cursedBodyRate;
  } catch (err) {
    console.error('请求失败', err);
    return undefined;
  }
}

如果需要同时拿到键和值组成完整键值对，可以这么写：

const cursedBodyPair = {
  "Cursed Body": data.abilities?.["Cursed Body"]
};

3. 渲染到HTML页面示例 #

拿到值之后直接操作DOM渲染即可：

// 假设页面上有id为ability-rate的DOM元素
async function renderAbility() {
  const rate = await getCursedBodyValue();
  const dom = document.getElementById('ability-rate');
  if (dom && rate) {
    // 渲染内容可自行调整格式
    dom.textContent = `Cursed Body 触发概率：${rate}`;
  }
}
// 页面加载后执行渲染
window.addEventListener('load', renderAbility);

注意：你提供的JSON示例末尾多了一个冗余逗号，实际API返回需要保证JSON格式合法，否则会出现解析失败问题。

内容的提问来源于stack exchange，提问作者Yens Van Hout