ilya_shyian
/
homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="content"></div>
        <script>
//FETCH BASIC
            // function drawTable(params = {}) {
            //     let { data = {}, parent = document.body } = params;
            //     let table = document.createElement("table");
            //     table.border = 1;
            //     parent.append(table);
            //     for (let el in data) {
            //         let tr = document.createElement("tr");
            //         let th = document.createElement("th");
            //         let td = document.createElement("td");

            //         if (data[el].constructor.name === "Object") {
            //             drawTable({ data: data[el], parent: td });
            //             table.append(tr);
            //             tr.append(th);
            //             tr.append(td);
            //             continue;
            //         }
            //         if (data[el].constructor.name === "Array") {
            //             let tr = document.createElement("tr");
            //             let th = document.createElement("th");
            //             table.append(tr);
            //             tr.append(th);
            //             th.innerHTML = el;
            //             th.colSpan = 2;

            //             for (let item of data[el]) {
            //                 let tr = document.createElement("tr");
            //                 let td = document.createElement("td");
            //                 table.append(tr);
            //                 tr.append(td);

            //                 if (data[el].constructor.name === "Object") {
            //                     drawTable({ data: data[el], parent: td });
            //                     continue;
            //                 }
            //                 td.colSpan = 2;
            //                 td.innerHTML = item;
            //             }
            //             continue;
            //         }
            //         table.append(tr);
            //         tr.append(th);
            //         tr.append(td);
            //         th.innerHTML = el;
            //         td.innerHTML = data[el];
            //     }
            //     parent.append(table);
            // }
            // fetch("https://swapi.py4e.com/api/people/1/")
            //     .then((res) => res.json())
            //     .then((luke) => {
            //         drawTable({ data: luke });
            //     });

//FETCH IMPROVED

            // function drawTable(params = {}) {
            //     let { data = {}, parent = document.body } = params;
            //     let table = document.createElement("table");
            //     table.border = 1;
            //     parent.append(table);
            //     for (let [key, val] of Object.entries(data)) {
            //         let tr = document.createElement("tr");
            //         let th = document.createElement("th");
            //         let td = document.createElement("td");

            //         if (val.constructor.name === "Object") {
            //             drawTable({ data: val, parent: td });
            //             table.append(tr);
            //             tr.append(th);
            //             tr.append(td);
            //             continue;
            //         }
            //         if (val.constructor.name === "Array") {
            //             let tr = document.createElement("tr");
            //             let th = document.createElement("th");
            //             table.append(tr);
            //             tr.append(th);
            //             th.innerHTML = key;
            //             th.colSpan = 2;

            //             for (let value of val) {
            //                 let tr = document.createElement("tr");
            //                 let td = document.createElement("td");
            //                 table.append(tr);
            //                 tr.append(td);

            //                 if (value.match(/^https:\/\/swapi\.py4e\.com\/+/)) {
            //                     let btn = document.createElement("button");
            //                     btn.innerHTML = value;
            //                     btn.onclick = () => {
            //                         fetch(value)
            //                             .then((res) => res.json())
            //                             .then((luke) => {
            //                                 drawTable({ data: luke });
            //                             });
            //                     };
            //                     td.colSpan = 2;
            //                     td.append(btn);
            //                     continue;
            //                 }
            //                 if (val.constructor.name === "Object") {
            //                     drawTable({ data: val, parent: td });
            //                     continue;
            //                 }
            //                 td.colSpan = 2;
            //                 td.innerHTML = value;
            //             }
            //             continue;
            //         }
            //         table.append(tr);
            //         tr.append(th);
            //         tr.append(td);
            //         th.innerHTML = key;
            //         if (val.constructor.name === "String" && val.match(/^https:\/\/swapi\.py4e\.com\/+/)) {
            //             let btn = document.createElement("button");
            //             btn.innerHTML = val;
            //             btn.onclick = () => {
            //                 fetch(val)
            //                     .then((res) => res.json())
            //                     .then((data) => {
            //                         drawTable({ data: data });
            //                     });
            //             };
            //             td.append(btn);
            //             continue;
            //         }
            //         td.innerHTML = val;
            //     }

            //     parent === document.body && (parent.innerHTML = "");
            //     parent.append(table);
            // }
            // fetch("https://swapi.py4e.com/api/people/1/")
            //     .then((res) => res.json())
            //     .then((luke) => {
            //         drawTable({ data: luke });
            //     });

//MYFETCH
            // function myfetch(url) {
            //     return new Promise(function (resolve, reject) {
            //         const xhr = new XMLHttpRequest();
            //         xhr.open("get", url);
            //         xhr.send();

            //         xhr.onreadystatechange = (e) => {
            //             if (xhr.readyState != 4) {
            //                 return;
            //             }
            //             if (xhr.status === 200) {
            //                 resolve(JSON.parse(xhr.responseText));
            //             }
            //             reject("some request error");
            //         };
            //     });
            // }

            // myfetch("https://swapi.py4e.com/api/people/1/").then(
            //     (data) => console.log(data),
            //     (err) => console.log("error ", err)
            // );

//RACE
            // function myfetch(url) {
            //     return new Promise(function (resolve, reject) {
            //         const xhr = new XMLHttpRequest();
            //         xhr.open("get", url);
            //         xhr.send();

            //         xhr.onreadystatechange = (e) => {
            //             if (xhr.readyState != 4) {
            //                 return;
            //             }
            //             if (xhr.status === 200) {
            //                 resolve(JSON.parse(xhr.responseText));
            //             }else{
            //                  reject("some request error");
            //             }

            //         };
            //     });
            // }
            // const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));

            // const race = async () => {
            //     let rez = await Promise.race([
            //         delay(Math.random() * 20),
            //         myfetch("https://swapi.py4e.com/api/people/1/"),
            //     ]);

            //     console.log(rez);
            // };
        </script>
    </body>
</html>