如何从API获取数组并渲染？Pokemon API类型数组渲染问题

问题根源 #

1. innerHTML覆盖问题：循环里每次用innerHTML = markup赋值会直接覆盖容器之前的内容，最终只显示最后一次循环生成的类型。
2. 数据结构访问错误：data.types中的每个元素是嵌套对象（结构为{ type: { name: "类型名称" } }），直接输出elementTypes[i]会显示[object Object]，必须访问elementTypes[i].type.name才能拿到实际类型名称。

修正方案 #

方案1：累加innerHTML（先清空容器避免重复）

async function fetchData() {
    const pokemonName = document.getElementById("pokemonName").value.toLowerCase();
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`);
    const data = await response.json();

    const elementTypes = data.types;
    const typesContainer = document.getElementById("pokeTypes");
    // 清空容器，防止多次查询后内容重复
    typesContainer.innerHTML = '';
    for(let i = 0; i < elementTypes.length; i++) {
        const typeName = elementTypes[i].type.name;
        const markup = `<li>${typeName}</li>`;
        // 使用+=累加内容，而非覆盖
        typesContainer.innerHTML += markup;
    }
}

方案2：一次性拼接后赋值（性能更优）

减少DOM操作次数，先把所有类型的HTML标记拼接完成，再一次性赋值给innerHTML：

async function fetchData() {
    const pokemonName = document.getElementById("pokemonName").value.toLowerCase();
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`);
    const data = await response.json();

    const elementTypes = data.types;
    let typesMarkup = '';
    for(let i = 0; i < elementTypes.length; i++) {
        const typeName = elementTypes[i].type.name;
        typesMarkup += `<li>${typeName}</li>`;
    }
    document.getElementById("pokeTypes").innerHTML = typesMarkup;
}

方案3：用数组方法简化代码

利用map和join方法可以更简洁地实现需求：

async function fetchData() {
    const pokemonName = document.getElementById("pokemonName").value.toLowerCase();
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`);
    const data = await response.json();

    // 遍历types数组生成每个类型的li标签，再拼接成字符串
    const typesMarkup = data.types.map(item => `<li>${item.type.name}</li>`).join('');
    document.getElementById("pokeTypes").innerHTML = typesMarkup;
}

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