123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- <header>
- fetch improved
- </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>
|