我如何正确获取 API
[英]How I can fetch the API correctly
问题描述
I have created 10 , each display one id in API.
我创建了 10 个，每个在 API 中显示一个 id。 I have used querySelectorAll to find all the and use for loop to make the content of each contains one id in API but when I try to code, as you can see, one will contain all ten id and I don't know how to make it possible我已经使用 querySelectorAll 来查找所有的并使用 for 循环使每个的内容在 API 中包含一个 id 但是当我尝试编码时，如您所见，一个将包含所有十个 id，我不知道如何制作有可能
function onResponse(response) { return response.json(); } function data(data) { //create a function to display the element var htmls = data.map(function(post) { return `<li> <h2> ${post.id}</h2> </li>` }); var html = htmls.join(''); const p = document.querySelectorAll('span'); for (let i = 0; i < p.length; i++) { p[i].innerHTML = html; } } fetch('https://jsonplaceholder.typicode.com/users').then(onResponse).then(data);
<body> <form> <div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </form> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2021-10-17 15:06:02
html is already the HTML of each id . html已经是每个id的 HTML。 You are assigning it to each span 's innerHTML , causing there to be 9 duplicates.您将它分配给每个span的innerHTML ，导致有 9 个重复项。
Instead, just assign to the span 's parent's innerHTML :相反，只需分配给span的父级的innerHTML ：
function onResponse(response) { return response.json(); } function data(data) { //create a function to display the element var htmls = data.map(function(post) { return `<li> <h2> ${post.id}</h2> </li>` }); var html = htmls.join(''); const div = document.querySelector('div'); div.innerHTML = html; } fetch('https://jsonplaceholder.typicode.com/users').then(onResponse).then(data);
<body> <form> <div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </form> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.