Javascript 动态更新html内容

因此，我在index.html中绑定了一个脚本，它必须从api中获取JSON数组，然后在得到响应时动态更新我的页面

但结果我得到了一个作为我的页面唯一更新

这是我的剧本

fetch(url)
.then((resp) => resp.json())
.then((resp) => {
    resp.results.forEach(item => {
        fetch(item.url)
            .then((response)=> response.json())
            .then((response) => pokeArr.push(response))
            .catch(console.log)
    })
}).catch(console.log)


const filler = () => {
    if(!pokeArr) return 0
    pokeArr.map((i,j)=>{
        return `<tr>${i.name}</tr>`
    })
}

const pokeindex = () => {
    document.getElementById('a').appendChild(document.createElement(filler()))
}
pokeindex()

fetch（url）
.然后（（resp）=>resp.json（））
。然后（（resp）=>{
forEach（项目=>{
获取（item.url）
.then（（response）=>response.json（））
.然后（（响应）=>pokerr.push（响应））
.catch（console.log）
})
}).catch（console.log）
常量填充符=（）=>{
如果（！pokerar）返回0
pokerar.map（（i，j）=>{
返回`${i.name}`
})
}
常数pokeindex=（）=>{
document.getElementById（'a'）.appendChild（document.createElement（filler（）））
}
pokeindex（）

---

当我安慰它时，我可以在控制台中看到我得到的所有响应，因此我至少在抓取部分做对了。

这里有一些问题：

你在一个地方有

parberakan

，但在另一个地方有

pokerar

；在你的评论中，你暗示他们是同一件事

您不能在引用的代码中的任何地方声明

parberakan

/

pokerar

引用的代码中没有任何内容等待各种

fetch

调用完成（即使是第一个调用，尤其是

then

处理程序中的一系列调用）

fetch

调用没有检查

。ok

；看

document.createElement

不接受HTML字符串。它接受要创建的单个元素的标记名（例如，

document.createElement（“div”）

）

filler

不返回

map

的结果

将

console.log

直接传递到

catch

不是100%可靠的

粗略猜测，我怀疑您想做这样的事情（请参阅注释），但我建议您从当前任务中退一步，学习一些基本教程：

// Create these functions first
const filler = (pokeArray) => {     // Accept the array as a parameter
    if(!pokeArray) return null;     // Recommend null instead of 0 if the other return is an array
    return pokeArray.map((i,j)=>{   // Return the result of `map`
        return `<tr>${i.name}</tr>`;
    });
};

const pokeindex = (pokeArray) => {  // Accept the array as a parameter
    // I'm assuming the element with id="a" is a `table` or `tbody`
    document.getElementById('a').insertAdjacentHTML( // This accepts HTML
        "beforeend",
        fillter(pokeArray)
    );
}

fetch(url)
.then((resp) => {
    // Check .ok
    if (!resp.ok) {
        throw new Error("HTTP error " + resp.status);
    }
    return resp;
})
.then((resp) => resp.json())
.then((resp) => Promise.all(resp.results.map(item => { // Wait for all these to complete;
                                                       // result is an array of the
                                                       // resolution values
    return fetch(item.url)
        .then((response) => {
            // Check .ok
            if (!response.ok) {
                throw new Error("HTTP error " + resp.status);
            }
            return response;
        })
        .then((response) => response.json());
})))
.then((pokeArray) => {
    // Now we have the array and can do something
    pokeindex(pokeArray);
})
.catch(error => { console.log(error); }); // Passing `console.log` directly isn't reliable

//首先创建这些函数
const filler=（pokerray）=>{//接受数组作为参数
if（！pokerray）return null；//如果另一个返回是数组，则建议使用null而不是0
return pokerray.map（（i，j）=>{//返回`map'的结果`
返回`${i.name}`；
});
};
const pokeindex=（pokerray）=>{//接受数组作为参数
//我假设id=“a”的元素是“table”或“tbody”`
document.getElementById（'a'）.insertAdjacentHTML（//这接受HTML
“之前”，
fillter（Pokerray）
);
}
获取（url）
。然后（（resp）=>{
//检查，好的
如果（！响应正常）{
抛出新错误（“HTTP错误”+响应状态）；
}
返回响应；
})
.然后（（resp）=>resp.json（））
然后（（resp）=>Promise.all（resp.results.map）（item=>{//等待所有这些完成；
//结果是一个
//分辨率值
返回获取（item.url）
。然后（（响应）=>{
//检查，好的
如果（！response.ok）{
抛出新错误（“HTTP错误”+响应状态）；
}
返回响应；
})
。然后（（response）=>response.json（））；
})))
.然后（（Pokerray）=>{
//现在我们有了阵列，可以做点什么了
pokeindex（Pokerray）；
})
.catch（错误=>{console.log（错误）；}）；//直接传递`console.log`是不可靠的

---

不过，我可能没有抓住每一件小事。这只是为了帮助你找到正确的方向。

什么是

parberakan

？什么是

pokerar

？请注意

document.createElement

不接受HTML字符串。它接受要创建的单个元素的标记名（例如，

document.createElement（“div”）

）。旁注：您的

fetch

调用缺少一个

。ok

检查，详细信息见。parberakan是Pokerar的旧名称，它是一个空数组，在我的代码中修复了这个问题，没有任何变化所以请注意，在尝试对结果做一些事情（我想？）之前，没有任何东西等待您的多个

fetch

调用完成。不过，问题可能太广泛了。我投票决定关闭，建议其他人也这样做。