<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>