homework/HW12/main.js

// fetch basic

{
    let DOM = document.body;
    fetch('https://swapi.py4e.com/api/people/1/')
        .then(res => res.json(),
            err => console.log("ERROR"))
        .then(luke => createTable(DOM, luke));

    function createTable(DOM, JSON) {
        console.log(DOM, JSON);
        const tableEl = document.createElement("table");
        tableEl.border = 1;

        for (let [key, value] of Object.entries(JSON)) {
            createTr(key, value);
        }

        DOM.append(tableEl);

        function createTr(td1, td2) {
            const trEl = document.createElement("tr");
            const td1El = document.createElement("td");
            const td2El = document.createElement("td");
            td1El.innerHTML = td1;
            if (typeof td2 === "object") {
                const ulEl = document.createElement("ul");
                for (let value of td2) {
                    const liEl = document.createElement("li");
                    liEl.innerText = value;
                    ulEl.appendChild(liEl);
                }
                td2El.appendChild(ulEl);
            } else {
                td2El.innerHTML = td2;
            }
            trEl.append(td1El, td2El);
            tableEl.append(trEl);
        }

    }
}

// fetch improved

{
    let DOM = document.body;
    myFetch(DOM);

    function myFetch(dom) {
        fetch('https://swapi.py4e.com/api/people/1/')
            .then(res => res.json(),
                err => console.log("ERROR"))
            .then(luke => createTable(dom, luke));
    }

    function createTable(DOM, JSON) {
        console.log(DOM, JSON);
        const tableEl = document.createElement("table");
        tableEl.border = 1;
        for (let [key, value] of Object.entries(JSON)) {
            createTr(key, value);
        }
        DOM.append(tableEl);

        function createTr(td1, td2) {
            const trEl = document.createElement("tr");
            const td1El = document.createElement("td");
            const td2El = document.createElement("td");
            td1El.innerHTML = td1;
            if (typeof td2 === "number") td2 = td2.toString();
            if (typeof td2 !== "object" && !td2.indexOf("https://swapi.py4e.com/api/")) td2 = [td2];
            if (typeof td2 === "object") {
                const ulEl = document.createElement("ul");
                for (let value of td2) {
                    const liEl = document.createElement("li");
                    const buttonEl = document.createElement("button");
                    buttonEl.innerText = value;
                    buttonEl.onclick = () => {
                        buttonEl.hidden = true;
                        myFetch(buttonEl.parentElement);
                    }
                    liEl.appendChild(buttonEl);
                    ulEl.appendChild(liEl);
                }
                td2El.appendChild(ulEl);
            } else {
                td2El.innerHTML = td2;
            }
            trEl.append(td1El, td2El);
            tableEl.append(trEl);
        }
    }
}

// myfetch

myfetch('https://swapi.py4e.com/api/people/1/').then(luke => console.log(luke));

function myfetch(url) {
    return new Promise(function (resolve, reject) {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = "json";
        xhr.onload = function () {
            if (xhr.status == 200) {
                resolve(xhr.response);
            }
            else {
                reject(`ERROR ${xhr.status} - ${xhr.statusText}`);
            }
        }
        xhr.onerror = () => reject(`ERROR ${xhr.status} - ${xhr.statusText}`);
        xhr.send();
    })
}

// race

Promise.race([myfetch('https://swapi.py4e.com/api/people/1/'), delay(30)]).then((value) => console.log(value));


function myfetch(url) {
    return new Promise(function (resolve, reject) {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = "json";
        xhr.onload = function () {
            if (xhr.status == 200) {
                resolve(xhr.response);
            }
            else {
                reject(`ERROR ${xhr.status} - ${xhr.statusText}`);
            }
        }
        xhr.onerror = () => reject(`ERROR ${xhr.status} - ${xhr.statusText}`);
        xhr.send();
    })
}