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>