homework/12/src/App.js

// fetch basic

// С помощью следующего кода считать и вывести информацию о Люке Скайвокере:

// fetch('https://swapi.dev/api/people/1/')
//   .then(res => res.json())
//   .then(luke => console.log(luke))

// Напишите функцию для отображения любого JSON в форме таблицы. 
// Функция должна принимать два параметра:

// * DOM - элемент, в котором строится таблица
// * JSON, который нужно отобразить.

// fetch improved

// Расширить функцию отображения:

// * Если одно из полей строка или массив.
// * Если строки или строка содержат в себе https://swapi.dev/api/, то выводить вместо текста строки кнопку, 
// при нажатии на которую:
//     * делается fetch данных по этой ссылке
//     * функция отображения запускает сама себя(рекурсивно) 
//     для отображения новых данных в том же элементе.

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))
            }
            container.append(btn)
        } else {
            container.innerHTML = str
        }
    }
}

// myfetch

// Используя XMLHTTPRequest, напишите промисифицированную функцию myfetch, т.е. функцию, которая 
// возвращает промис, и работает схоже с fetch, только в один этап:

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

// Функция myfetch ожидает что ответ будет в формате JSON (используйте JSON.parse(response.text)) 
// В случае ошибок (request.onerror или request.status не 200) не забудьте вызывать reject

// function myfetch(url){
//     return new Promise(function (resolve, reject){
//         const xhr = new XMLHTTPRequest()
//         ///...
//     })
// }

myfetch('https://swapi.dev/api/people/10/')
    .then(kenobi => console.log(kenobi))

function myfetch(url) {
    return new Promise(function (resolve, reject) {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState != 4) {
                return;
            }
            if (xhr.status == 200) {
                resolve(JSON.parse(xhr.responseText));
            } else {
                reject('error')
            }
        }
        xhr.open('GET', url, true);
        xhr.send(null);
    })
}