homeworks/HW12/main.js

fetch('https://swapi.dev/api/people/1/')
    .then(res => res.json())
    .then(luke => renderTable(document.body, luke))

function renderTable(parent, obj) {
    let $table = document.createElement('table')
    for(let key in obj) {
        let $tr = document.createElement('tr')
        let $td = document.createElement('td')
        let $td2 = document.createElement('td')
        if(Array.isArray(obj[key])) {
            for(let item of obj[key]) {
                let newTable = document.createElement('table')
                let newTr = document.createElement('tr')
                let newTd = document.createElement('td')
                linkChecker(item, newTd)
                newTr.append(newTd)
                newTable.append(newTr)
                $td2.append(newTable)
            }
        } else {
            linkChecker(obj[key], $td2)
        }

        $td.innerHTML = key

        $tr.append($td, $td2)
        $table.appendChild($tr)
    }
    parent.appendChild($table)
}
function linkChecker(str, container) {
    if(typeof str === 'string') {
        if(str.includes('https://swapi.dev/api/')) {
            let btn = document.createElement('button')
            btn.innerHTML = 'Show'
            btn.onclick = () => {
                fetch(str).then(r => r.json())
                    .then(r => renderTable(container, r))
                    // .then(r => console.log(r))
            }
            container.append(btn)
        } else {
            container.innerHTML = str
        }
    }
}
//
// function myFetch(url){
//     return new Promise(function (resolve, reject){
//         const xhr = new XMLHttpRequest()
//         xhr.open('get', url)
//         xhr.onload = function () {
//             if (xhr.status >= 200 && xhr.status < 300) {
//                 resolve(xhr.response);
//             } else {
//                 reject(() => alert('something went wrong'));
//             }
//         xhr.send();
//     }});
// }
// myFetch('https://swapi.dev/api/peope/4/')
//     .then(res => console.log(res))
//
// function delay(ms) {
//     return setTimeout(() => console.log('delay worked'), ms)
// }
// Promise.race([myFetch('https://swapi.dev/api/peope/4/'), delay(300)]).then(val => console.log(val))
// Promise.race([myFetch('https://swapi.dev/api/peope/1/'), delay(200)]).then(val => console.log(val))