Vấn đề về fetch API

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);

Không phải Fetch API nhé, mà là trình JavaScript bạn kém, chưa kể là không hiểu HTML và JavaScript làm việc với nhau ra sao. Việc gì phải tạo 10 span trống trên HTML làm gì? Bạn có học vòng lặp trong JavaScript không? Nếu có, thì 10 span kia có phải vô nghĩa? Nếu chưa/ không => học thêm về JavaScript đi, làm gì mà vội vàng thế?

2 Likes

Không set cứng 10 span như vậy, vì ko thể đảm bảo rằng output gồm 10 slot.

4 Likes

Nhìn API mình đoán không lầm là get all data chứ không phải phân trang từ phía backend. Nên bạn muốn chỉ hiện 10 row thì phải phân trang ở phía frontend
Nhìn vào code mình thấy bạn đang sai flow phân trang. VD data trả về là 10 objects. Bạn map list 10 objects thành 10 html thành list htmls, rồi lại join list htmls thành chuỗi html. Cuối cùng lại loop 10 span để nhét html có 10 objects vào. Tổng cộng là 100 objects
Cách đơn giản nhất get data từ fetch xong split thành 1 list có 10 objects theo offset (trang), rồi loop 10 objects đó map thành html bao bên ngoài span. Ở file html bạn bỏ luôn 10 span tag đi

3 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?