Paginacja w aplikacji łączącej się z API

0

Hej, mam do zrobienia zadanie, z którego większość (chyba) już ogarnąłem - było nim stworzenie aplikacji, która łączy się z Spacex API i wyświetla określone dane w tabelach.
Jeśli chodzi o same tabele, to zostały mi do wrzucenia obrazki, kosmetyczne poprawki i CSS (dopiero zacząłem).
Muszę jednak wykonać paginację (pojedyncza strona powinna zawierać 10 elementów) na podstronie wyświetlającej informacje o Starlinkach (w kodzie funkcja renderStarlink)- nigdy jej nie robiłem i nie mam pojęcia, jak się do tego zabrać. Szukając w internetach trafiłem głównie na narzędzia, które robią to za mnie - a ja mam to najpewniej zrobić samodzielnie.
Czy ktoś byłby w stanie pomóc/wytłumaczyć z czym to się je i jak to się robi?
Z góry dziękuję :).
Poniżej wrzucam kod i dokumentację.

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <title>SpaceX</title>
    <style>
        table {
            width: 70%;
        }

        table,
        th,
        td {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }

        #container0 {

            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-top: 25%;

        }

        #container1 {
            display: flex;
            align-items: center;
        }

        #button1,
        #button2,
        #button3 {
            background-color: black;
            color: white;
            font-size: 150%;
            padding: 32px 16px;
            border-radius: 50%;
        }

        #myHead {

            font-size: 2cm;
        }
    </style>
</head>

<body>
    <h1 id='myHead'></h1>
    <div id='container0'></div>
    <div id='container1'></div>
    <script>

        renderDef = () => {
            var button1 = document.createElement('input');
            button1.setAttribute('type', 'button');
            button1.setAttribute('value', 'Rockets');
            button1.setAttribute('id', 'button1');
            document.getElementById('container0').appendChild(button1);
            button1.addEventListener('click', () => {
                renderRocket();
                document.getElementById('button1').remove();
                document.getElementById('button2').remove();
                document.getElementById('button3').remove();

            })

            var button2 = document.createElement('input');
            button2.setAttribute('type', 'button');
            button2.setAttribute('value', 'Starlinks');
            button2.setAttribute('id', 'button2');
            document.getElementById('container0').appendChild(button2);
            button2.addEventListener('click', () => {
                renderStarlink();
                document.getElementById('button1').remove();
                document.getElementById('button2').remove();
                document.getElementById('button3').remove();
            })

            var button3 = document.createElement('input');
            button3.setAttribute('type', 'button');
            button3.setAttribute('value', 'Tesla Car');
            button3.setAttribute('id', 'button3');
            document.getElementById('container0').appendChild(button3);
            button3.addEventListener('click', () => {
                renderTesla();
                document.getElementById('button1').remove();
                document.getElementById('button2').remove();
                document.getElementById('button3').remove();
            })
        }
        renderDef();

        renderRocket = () => {

            var myHead = document.getElementById('myHead');
            myHead.textContent = "Rockets";

            class Rocket {
                constructor(rcIMG, rcName, rcID) {
                    this.rcIMG = rcIMG;
                    this.rcName = rcName;
                    this.rcID = rcID;
                }
            }

            fetch('https://api.spacexdata.com/v4/rockets').then(response => response.json()).then(data => {

                var arrayHead = new Array();
                arrayHead = ["Rakieta", "Nazwa", "ID", ""];

                var myTable = document.createElement('table');
                myTable.setAttribute('id', 'myTable');
                var tr = myTable.insertRow(-1);

                for (i = 0; i < arrayHead.length; i++) {
                    let th = document.createElement('th');
                    th.innerHTML = arrayHead[i];
                    tr.appendChild(th);
                }
                var div = document.getElementById('container1');
                div.appendChild(myTable);

                for (let i = 0; i < data.length; i++) {
                    const rocketName = data[i].name;
                    const rocketImg = data[i].flickr_images[0];
                    const rocketID = data[i].id;
                    var Rockets = new Rocket(rocketImg, rocketName, rocketID);
                    console.log(Rockets);
                    const thisTab = document.getElementById('myTable');
                    console.log(thisTab);

                    var myTab = document.getElementById('myTable');
                    var rowAm = myTab.rows.length;
                    var tr = myTab.insertRow(rowAm);
                    tr.classList.add('rows');
                    for (a = 0; a < arrayHead.length; a++) {
                        let td = document.createElement('td');
                        td = tr.insertCell(a);
                        td.classList.add('column');

                        if (a === 0) {
                            var IMGcontainer = document.createElement('div');
                            IMGcontainer.setAttribute('id', 'IMG');

                            var textElement = document.createElement('img');
                            textElement.src = rocketImg;
                            td.appendChild(IMGcontainer);
                            IMGcontainer.appendChild(textElement);
                        }
                        else if (a === 1) {
                            var textElement = document.createElement('p');
                            textElement.textContent = rocketName;
                            td.appendChild(textElement);
                        }
                        else if (a === 2) {
                            var textElement = document.createElement('p');
                            textElement.textContent = rocketID;
                            td.appendChild(textElement);
                        }
                        else if (a === 3) {
                            var button = document.createElement('input');
                            button.setAttribute('type', 'button');
                            button.setAttribute('value', 'Zobacz');
                            button.setAttribute('id', i);

                            td.appendChild(button);
                        }

                    }
                }
                document.getElementById('0').addEventListener('click', () => {
                    const remDiv = document.getElementById('myTable');
                    remDiv.remove();
                    document.getElementById('returnButton2').remove();
                    renderoneRocket('https://api.spacexdata.com/v4/rockets/5e9d0d95eda69955f709d1eb');

                })
                document.getElementById('1').addEventListener('click', () => {
                    const remDiv = document.getElementById('myTable');
                    remDiv.remove();
                    document.getElementById('returnButton2').remove();
                    renderoneRocket('https://api.spacexdata.com/v4/rockets/5e9d0d95eda69973a809d1ec');
                })
                document.getElementById('2').addEventListener('click', () => {
                    const remDiv = document.getElementById('myTable');
                    remDiv.remove();
                    document.getElementById('returnButton2').remove();
                    renderoneRocket('https://api.spacexdata.com/v4/rockets/5e9d0d95eda69974db09d1ed');
                })
                document.getElementById('3').addEventListener('click', () => {
                    const remDiv = document.getElementById('myTable');
                    remDiv.remove();
                    document.getElementById('returnButton2').remove();
                    renderoneRocket('https://api.spacexdata.com/v4/rockets/5e9d0d96eda699382d09d1ee');
                })
            });
            const returnButton2 = document.createElement('input');
            returnButton2.setAttribute('type', 'button');
            returnButton2.setAttribute('value', 'Powrót');
            returnButton2.setAttribute('id', 'returnButton2');
            document.getElementById('container1').appendChild(returnButton2);
            returnButton2.addEventListener('click', () => {
                document.getElementById('myTable').remove();
                document.getElementById('returnButton2').remove();
                document.getElementById('myHead').textContent = "";
                renderDef();
            })
        }

        renderoneRocket = (fRocketId) => {
            class oneRocket {
                constructor(rocName, rocSize, rocIMG, rocDescript, rocFlyDate, rocFlyPrice, rocIfUse, rocEngInfo) {
                    this.rocName = rocName;
                    this.rocSize = rocSize;
                    this.rocIMG = rocIMG;
                    this.rocDescript = rocDescript;
                    this.rocFlyDate = rocFlyDate;
                    this.rocFlyPrice = rocFlyPrice;
                    this.rocIfUse = rocIfUse;
                    this.rocEngInfo = rocEngInfo;
                }
            }

            fetch(fRocketId).then(response => response.json()).then(data => {

                console.log(data);
                var arrayHead = new Array();
                arrayHead = ["Nazwa", "Wymiary i waga", "Obraz", "Opis", "Data pierwszego lotu", "Koszt wystrzału", "W użyciu (tak/nie)", "Inrofmacje o silniku"];

                var secondTable = document.createElement('table');
                secondTable.setAttribute('id', 'secondTable');
                var tr = secondTable.insertRow(-1);

                for (i = 0; i < arrayHead.length; i++) {
                    let th = document.createElement('th');
                    th.innerHTML = arrayHead[i];
                    tr.appendChild(th);
                }
                var div = document.getElementById('container1');
                div.appendChild(secondTable);

                const rocketName = data.name;
                const rocketSize = `${data.height.meters}m.
                                        ${data.mass.kg}kg.`;
                const rocketIMG = data.flickr_images[0];
                const rocketDescript = data.description;
                const rocketFlyDate = data.first_flight;
                const rocketFlyPrice = data.cost_per_launch;
                const rocketIfUse = data.active;
                const rocketEngineInfo = `thrust vacuum:
                                            ${data.engines.thrust_vacuum.kN}

                                            type:
                                            ${data.engines.type}

                                            thrust to weigh:
                                            ${data.engines.thrust_to_weigh}`;

                var ThisRocket = new oneRocket(rocketName, rocketSize, rocketIMG, rocketDescript, rocketFlyDate, rocketFlyPrice, rocketIfUse, rocketEngineInfo);
                console.log(ThisRocket);
                const thisTab = document.getElementById('secondTable');
                console.log(thisTab);

                var myTab = document.getElementById('secondTable');
                var rowAm = myTab.rows.length;
                var tr = myTab.insertRow(rowAm);
                tr.classList.add('rows');
                for (a = 0; a < arrayHead.length; a++) {
                    let td = document.createElement('td');
                    td = tr.insertCell(a);
                    td.classList.add('column');

                    if (a === 0) {
                        var rElement = document.createElement('p');
                        rElement.textContent = rocketName;
                        td.appendChild(rElement);

                    }
                    else if (a === 1) {
                        var rElement = document.createElement('p');
                        rElement.textContent = rocketSize;
                        td.appendChild(rElement);
                    }
                    else if (a === 2) {
                        var rElement = document.createElement('p');
                        rElement.textContent = 'notdoneyet';
                        td.appendChild(rElement);
                    }
                    else if (a === 3) {
                        var rElement = document.createElement('p');
                        rElement.textContent = rocketDescript;
                        td.appendChild(rElement);
                    }
                    else if (a === 4) {
                        var rElement = document.createElement('p');
                        rElement.textContent = rocketFlyDate;
                        td.appendChild(rElement);
                    }
                    else if (a === 5) {
                        var rElement = document.createElement('p');
                        rElement.textContent = rocketFlyPrice;
                        td.appendChild(rElement);
                    }
                    else if (a === 6) {
                        var rElement = document.createElement('p');
                        rElement.textContent = rocketIfUse;
                        td.appendChild(rElement);
                    }
                    else if (a === 7) {
                        var rElement = document.createElement('p');
                        rElement.textContent = rocketEngineInfo;
                        td.appendChild(rElement);
                    }

                }
                const returnButton = document.createElement('input');
                returnButton.setAttribute('type', 'button');
                returnButton.setAttribute('value', 'Powrót');
                returnButton.setAttribute('id', 'returnButton');
                div.appendChild(returnButton);
                returnButton.addEventListener('click', () => {
                    const remDiv3 = document.getElementById('secondTable');
                    remDiv3.remove();
                    returnButton.remove();
                    renderRocket();
                })
            });
        }

        renderStarlink = () => {

            var myHead2 = document.getElementById('myHead');
            myHead2.textContent = "Starlinks";

            class Starlink {
                constructor(stID, stName, stDate) {
                    this.stID = stID;
                    this.stName = stName;
                    this.stDate = stDate;
                }
            }

            fetch('https://api.spacexdata.com/v4/starlink').then(response => response.json()).then(data2 => {

                var arrayHead2 = new Array();
                arrayHead2 = ["ID", "Nazwa", "Data wystrzelenia"];

                var myTable3 = document.createElement('table');
                myTable3.setAttribute('id', 'myTable3');
                var tr = myTable3.insertRow(-1);

                for (i = 0; i < arrayHead2.length; i++) {
                    let th = document.createElement('th');
                    th.innerHTML = arrayHead2[i];
                    tr.appendChild(th);
                }
                var div2 = document.getElementById('container1');
                div2.appendChild(myTable3);

                for (let i = 0; i < data2.length; i++) {
                    const StarlinkID = data2[i].spaceTrack.OBJECT_ID;
                    const StarlinkName = data2[i].spaceTrack.OBJECT_NAME;
                    const StarlinkDate = data2[i].spaceTrack.LAUNCH_DATE;

                    var Starlinks = new Starlink(StarlinkID, StarlinkName, StarlinkDate);
                    console.log(Starlinks);
                    const thisTab3 = document.getElementById('myTable3');
                    console.log(thisTab3);

                    var myTab3 = document.getElementById('myTable3');
                    var rowAm = myTab3.rows.length;
                    var tr = myTab3.insertRow(rowAm);
                    tr.classList.add('rows');
                    for (a = 0; a < arrayHead2.length; a++) {
                        let td = document.createElement('td');
                        td = tr.insertCell(a);
                        td.classList.add('column');

                        if (a === 0) {
                            var textElement = document.createElement('p');
                            textElement.textContent = StarlinkID;
                            td.appendChild(textElement);
                        }
                        else if (a === 1) {
                            var textElement = document.createElement('p');
                            textElement.textContent = StarlinkName;
                            td.appendChild(textElement);
                        }
                        else if (a === 2) {
                            var textElement = document.createElement('p');
                            textElement.textContent = StarlinkDate;
                            td.appendChild(textElement);
                        }
                    }
                }
                const returnButton3 = document.createElement('input');
                returnButton3.setAttribute('type', 'button');
                returnButton3.setAttribute('value', 'Powrót');
                returnButton3.setAttribute('id', 'returnButton3');
                document.getElementById('container1').appendChild(returnButton3);
                returnButton3.addEventListener('click', () => {
                    document.getElementById('myTable3').remove();
                    document.getElementById('returnButton3').remove();
                    document.getElementById('myHead').textContent = "";
                    renderDef();
                })
            });
        }

        renderTesla = () => {

var myHead2 = document.getElementById('myHead');
myHead2.textContent = "Tesla Car";

class Tesla {
    constructor(eaDist, mrsDist, carDate, carDesc, carImg) {
        this.eaDist = eaDist;
        this.mrsDist = mrsDist;
        this.carDate = carDate;
        this.carDesc = carDesc;
        this.carImg = carImg;
    }
}

fetch('https://api.spacexdata.com/v4/roadster').then(response => response.json()).then(data3 => {

    var arrayHead3 = new Array();
    arrayHead3 = ["Odległość od Ziemi", "Odległość od Marsa", "Data wystrzelenia", "Opis", "Obraz"];

    var myTable4 = document.createElement('table');
    myTable4.setAttribute('id', 'myTable4');
    var tr = myTable4.insertRow(-1);

    for (i = 0; i < arrayHead3.length; i++) {
        let th = document.createElement('th');
        th.innerHTML = arrayHead3[i];
        tr.appendChild(th);
    }
    var div4 = document.getElementById('container1');
    div4.appendChild(myTable4);

        const earthDist = data3.earth_distance_km;
        const marsDist = data3.mars_distance_km;
        const carFlyDate = data3.launch_date_utc;
        const carDescript = data3.details;
        const carIMG = "not set yet";

        var TeslaCar = new Tesla(earthDist, marsDist, carFlyDate, carDescript, carIMG);
        console.log(TeslaCar);
        const thisTab4 = document.getElementById('myTable4');
        console.log(thisTab4);

        var myTab4 = document.getElementById('myTable4');
        var rowAm = myTab4.rows.length;
        var tr = myTab4.insertRow(rowAm);
        tr.classList.add('rows');
        for (a = 0; a < arrayHead3.length; a++) {
            let td = document.createElement('td');
            td = tr.insertCell(a);
            td.classList.add('column');

            if (a === 0) {
                var textElement = document.createElement('p');
                textElement.textContent = earthDist;
                td.appendChild(textElement);
            }
            else if (a === 1) {
                var textElement = document.createElement('p');
                textElement.textContent = marsDist;
                td.appendChild(textElement);
            }
            else if (a === 2) {
                var textElement = document.createElement('p');
                textElement.textContent = carFlyDate;
                td.appendChild(textElement);
            }
            else if (a===3){
                var textElement = document.createElement('p');
                textElement.textContent = carDescript;
                td.appendChild(textElement);
            }
            else if (a===4){
                var textElement = document.createElement('p');
                textElement.textContent = carIMG;
                td.appendChild(textElement);
            }
        }

    const returnButton4 = document.createElement('input');
    returnButton4.setAttribute('type', 'button');
    returnButton4.setAttribute('value', 'Powrót');
    returnButton4.setAttribute('id', 'returnButton4');
    document.getElementById('container1').appendChild(returnButton4);
    returnButton4.addEventListener('click', () => {
        document.getElementById('myTable4').remove();
        document.getElementById('returnButton4').remove();
        document.getElementById('myHead').textContent = "";
        renderDef();
    })
});
}
    </script>
</body>

</html>

Dokumentacja: https://github.com/r-spacex/SpaceX-API/ , https://github.com/r-spacex/S[...]blob/master/docs/v4/README.md

0

Dostajesz z api całą listę danych w formie tablicy i najprościej dla Ciebie jeśli wykonasz Slice tej tablicy

function paginate(array, page_size, page_number) {
  return array.slice((page_number - 1) * page_size, page_number * page_size);
}

i na zwrot dostajesz juz gotową tablice z elementami do wyświetlenia

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0