如何正确调用API并实现每个span标签单独展示一条API返回的id

问题原因 #

你提前把全部10条id对应的DOM结构拼接成了一整段HTML字符串，后续循环给每个span都赋值了这段完整内容，导致每个span都显示所有id，没有实现单条对应分配的效果。

修正代码 #

调整JS逻辑即可，HTML无需改动：

function onResponse(response) {
    return response.json();
}
// 原函数名和参数重名，修改为更语义化的renderData避免歧义
function renderData(data) {
    const spanList = document.querySelectorAll('span');
    for (let i = 0; i < spanList.length; i++) {
        // 增加边界判断，避免接口返回数据条数不足时报错
        if (!data[i]) break;
        // 如果不需要额外的li、h2标签，直接用textContent赋值纯文本即可
        spanList[i].textContent = data[i].id;
        // 如果要保留你原有的li、h2结构，替换为下面这行即可：
        // spanList[i].innerHTML = `<li><h2>${data[i].id}</h2></li>`;
    }
}
fetch('https://jsonplaceholder.typicode.com/users').then(onResponse).then(renderData);

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