|
|
@@ -0,0 +1,109 @@
|
|
|
+// fetch basic && fetch improved
|
|
|
+
|
|
|
+async function getData(link) {
|
|
|
+ try {
|
|
|
+ const data = await fetch(link);
|
|
|
+ const person = await data.json();
|
|
|
+ return person;
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+async function showTable(block, link) {
|
|
|
+ let readyTable = await buildTable(block, await getData(link));
|
|
|
+ let blockEl = document.querySelector(".container");
|
|
|
+ blockEl.appendChild(readyTable);
|
|
|
+}
|
|
|
+
|
|
|
+async function buildTable(el, json) {
|
|
|
+ let newTable = document.createElement("table");
|
|
|
+ newTable.className = ".tableFetch";
|
|
|
+ newTable.setAttribute("border", "1");
|
|
|
+ let tds = 0;
|
|
|
+ let btns = 0;
|
|
|
+ for (let [key, value] of Object.entries(json)) {
|
|
|
+ tds++;
|
|
|
+ let th = document.createElement("th");
|
|
|
+ let td = document.createElement("td");
|
|
|
+ td.id = `${key}TD${tds}`;
|
|
|
+ let tr = document.createElement("tr");
|
|
|
+ th.innerText = key;
|
|
|
+ if (typeof value === "string" && value.includes("http")) {
|
|
|
+ btns++;
|
|
|
+ let btn = document.createElement("button");
|
|
|
+ btn.id = `${key}Btn${btns}`;
|
|
|
+ btn.innerText = value;
|
|
|
+ td.innerHTML = btn.outerHTML;
|
|
|
+ } else if (Array.isArray(value) && value.length !== 0) {
|
|
|
+ for (let el of value) {
|
|
|
+ btns++;
|
|
|
+ let btn = document.createElement("button");
|
|
|
+ btn.id = `${key}Btn${btns}`;
|
|
|
+ btn.innerText = el;
|
|
|
+ td.innerHTML += `${btn.outerHTML}\n`;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ td.innerText = value.length > 0 ? value : "No value";
|
|
|
+ }
|
|
|
+ tr.appendChild(th);
|
|
|
+ tr.appendChild(td);
|
|
|
+ newTable.append(tr);
|
|
|
+ }
|
|
|
+
|
|
|
+ let buttons = newTable.querySelectorAll("button");
|
|
|
+ if (buttons.length !== 0) {
|
|
|
+ for (let btn of buttons) {
|
|
|
+ btn.onclick = async () => {
|
|
|
+ let appendTable = document.createElement("table");
|
|
|
+ appendTable.setAttribute("border", "1");
|
|
|
+ let btnTR = btn.closest("tr");
|
|
|
+ let btnTH = btnTR.firstChild;
|
|
|
+ btnTR.className = `${btnTH.textContent}TR`;
|
|
|
+ let data = btn.textContent;
|
|
|
+ btn.remove();
|
|
|
+ let TR = document.querySelector(`.${btnTR.className}`);
|
|
|
+ appendTable.appendChild(TR);
|
|
|
+ await showTable(appendTable, data);
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ el.appendChild(newTable);
|
|
|
+ return el;
|
|
|
+}
|
|
|
+
|
|
|
+showTable(blockTable, "https://swapi.dev/api/people/1/");
|
|
|
+
|
|
|
+// myfetch
|
|
|
+
|
|
|
+function myfetch(url) {
|
|
|
+ return new Promise(function (resolve, reject) {
|
|
|
+ const request = new XMLHttpRequest();
|
|
|
+ request.open("GET", url, true);
|
|
|
+ request.onreadystatechange = function () {
|
|
|
+ if (request.readyState != 4) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (request.status == 200) {
|
|
|
+ resolve(JSON.parse(request.responseText));
|
|
|
+ } else {
|
|
|
+ reject(request.status + ", " + request.statusText);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ request.send();
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+myfetch("https://swapi.dev/api/people/1/").then((data) =>
|
|
|
+ console.log(`MyFetch response:`, data)
|
|
|
+);
|
|
|
+
|
|
|
+// race
|
|
|
+
|
|
|
+const delay = async (ms) => new Promise((resolve) => setTimeout(resolve, ms));
|
|
|
+
|
|
|
+Promise.race([delay(1000), myfetch("https://swapi.dev/api/people/1/")]).then(
|
|
|
+ (value) => {
|
|
|
+ console.log(`First loaded promise: `, value);
|
|
|
+ }
|
|
|
+);
|
