|
|
@@ -0,0 +1,51 @@
|
|
|
+<header>
|
|
|
+ fetch improoved
|
|
|
+</header>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <script>
|
|
|
+ const improovedFetch = (url, el) => {
|
|
|
+ fetch(url)
|
|
|
+ .then(res => res.json())
|
|
|
+ .then(luke => {
|
|
|
+ let table = document.createElement("table");
|
|
|
+ for (let key in luke) {
|
|
|
+ let row = document.createElement("tr");
|
|
|
+ table.append(row);
|
|
|
+ let nameTd = document.createElement("td");
|
|
|
+ nameTd.innerText = key;
|
|
|
+ row.append(nameTd);
|
|
|
+ let valueTd = document.createElement("td");
|
|
|
+ let value = luke[key];
|
|
|
+ let valueArr = [];
|
|
|
+ if (typeof value == "string") {
|
|
|
+ valueArr.push(value);
|
|
|
+ }
|
|
|
+ else if (Array.isArray(value)) {
|
|
|
+ valueArr = value.filter(val => typeof val == "string");
|
|
|
+ }
|
|
|
+ valueArr = valueArr.filter(val => val.startsWith("https://swapi.dev/api/"));
|
|
|
+ if (valueArr.length > 0) {
|
|
|
+ for (let urlStr of valueArr) {
|
|
|
+ let div = document.createElement("div");
|
|
|
+ valueTd.append(div);
|
|
|
+ let button = document.createElement("button");
|
|
|
+ button.onclick = () => {
|
|
|
+ button.style.display = "none";
|
|
|
+ improovedFetch(urlStr, div);
|
|
|
+ };
|
|
|
+ valueTd.append(button);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ valueTd.innerText = luke[key];
|
|
|
+ }
|
|
|
+ row.append(valueTd);
|
|
|
+ }
|
|
|
+ table.border = "1";
|
|
|
+ el.append(table);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ improovedFetch('https://swapi.dev/api/people/1/', document.body);
|
|
|
+ </script>
|
|
|
+</body>
|
