Em có một vấn đề nho nhỏ về fetch. Em đã tạo ra 10 span để 10 id trong api sẽ được hiện thị trong mỗi span ấy. Vậy làm thế nào để mỗi span sẽ tương ứng với 10 id trong api vậy. Em thử code nhưng nó toàn ra mỗi span sẽ bao gồm luôn cả 10 id, vậy em phải làm thế nào ạ
Em xin cảm ơn.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="script.js" defer></script>
</head>
<body>
<form>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<input type="radio">
<label>1</label><br>
<input type="radio">
<label>2</label><br>
<input type="radio">
<label>3</label><br>
<input type="radio">
<label>4</label><br>
</div>
</form>
</body>
</html>
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);