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>