|
|
@@ -0,0 +1,130 @@
|
|
|
+<!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>
|
|
|
+ <script>
|
|
|
+ function fetchBasic() {
|
|
|
+
|
|
|
+ fetch('https://swapi.dev/api/people/1/')
|
|
|
+ .then((res) => res.json())
|
|
|
+ .then((luke) => {
|
|
|
+ basic(document.body, luke)
|
|
|
+ });
|
|
|
+
|
|
|
+ function basic(dom, json) {
|
|
|
+ const table = document.createElement("table");
|
|
|
+ table.setAttribute("border", "2")
|
|
|
+ dom.appendChild(table);
|
|
|
+
|
|
|
+ for (let key in json) {
|
|
|
+ const tr = document.createElement("tr")
|
|
|
+ tr.setAttribute("style", "background:#00FA9A")
|
|
|
+ const th = document.createElement("th");
|
|
|
+ th.setAttribute("style", "background:#40E0D0")
|
|
|
+ const td = document.createElement("td");
|
|
|
+ td.setAttribute("style", "background:#9400D3")
|
|
|
+
|
|
|
+ th.innerText = key;
|
|
|
+ td.innerText = json[key];
|
|
|
+ tr.appendChild(th);
|
|
|
+ tr.appendChild(td);
|
|
|
+ table.appendChild(tr)
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // fetchBasic()
|
|
|
+
|
|
|
+ function fetchImproved() {
|
|
|
+
|
|
|
+ fetch('https://swapi.dev/api/people/1/')
|
|
|
+ .then((res) => res.json())
|
|
|
+ .then((luke) => {
|
|
|
+ improved(luke)
|
|
|
+ });
|
|
|
+
|
|
|
+ function improved(json) {
|
|
|
+ const table = document.createElement("table");
|
|
|
+ table.setAttribute("border", "2")
|
|
|
+ for (let [key, value] of Object.entries(json)) {
|
|
|
+ const URL = "https://swapi.co/api/";
|
|
|
+
|
|
|
+
|
|
|
+ const tr = document.createElement("tr");
|
|
|
+ tr.setAttribute("style", "background:#00FA9A")
|
|
|
+ const td = document.createElement("td");
|
|
|
+ td.setAttribute("style", "background:#9400D3")
|
|
|
+ const th = document.createElement("th");
|
|
|
+ th.setAttribute("style", "background:#40E0D0")
|
|
|
+
|
|
|
+ document.body.appendChild(table)
|
|
|
+ table.appendChild(tr)
|
|
|
+ tr.appendChild(th)
|
|
|
+ tr.appendChild(td);
|
|
|
+ th.innerHTML = key;
|
|
|
+ td.innerHTML = value
|
|
|
+
|
|
|
+ if (!String(value).indexOf(URL)) {
|
|
|
+ const button = document.createElement("button")
|
|
|
+ button.innerHTML = value;
|
|
|
+ button.setAttribute("style", "background: #FF4500")
|
|
|
+ td.appendChild(button);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (typeof value === "object") {
|
|
|
+ td.innerHTML = '';
|
|
|
+ for (let key in value) {
|
|
|
+ const button = document.createElement("button")
|
|
|
+ td.appendChild(button);
|
|
|
+ button.setAttribute("style", "background:#FF8C00")
|
|
|
+ button.innerHTML = value[key];
|
|
|
+ button.onclick = () => {
|
|
|
+ document.body.removeChild(table)
|
|
|
+ fetch(value[key])
|
|
|
+ .then((res) => res.json())
|
|
|
+ .then((json) => improved(json))
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // //fetchImproved()
|
|
|
+
|
|
|
+ function myfetch(url) {
|
|
|
+ return new Promise(function (resolve, reject) {
|
|
|
+ const xhr = new XMLHttpRequest();
|
|
|
+ xhr.open('GET', url, true);
|
|
|
+ xhr.responseType = "json";
|
|
|
+ xhr.onload = function () {
|
|
|
+ if (xhr.status == 200) {
|
|
|
+ resolve(xhr.response);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ reject(`ERROR ${xhr.status} - ${xhr.statusText}`);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ xhr.onerror = () => reject(`ERROR ${xhr.status} - ${xhr.statusText}`);
|
|
|
+ xhr.send();
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // race
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
