|
|
@@ -0,0 +1,75 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <script>
|
|
|
+ fetch('https://swapi.dev/api/people/1/')
|
|
|
+ .then(res => res.json())
|
|
|
+ .then(luke => objectToDm(document.body, luke))
|
|
|
+ function objectToDm(el, data) {
|
|
|
+
|
|
|
+ let table = document.createElement("table")
|
|
|
+ table.border = 1
|
|
|
+ el.appendChild(table)
|
|
|
+ for (let key in data) {
|
|
|
+
|
|
|
+ let row = document.createElement("tr");
|
|
|
+ table.appendChild(row);
|
|
|
+
|
|
|
+ let name = document.createElement("th");
|
|
|
+ name.innerText = key;
|
|
|
+ row.appendChild(name);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ if(data[key] instanceof Array) {
|
|
|
+
|
|
|
+ for (let aboutLink of data[key]) {
|
|
|
+ let about = document.createElement("td");
|
|
|
+ about.style = "border: 2px solid black";
|
|
|
+ row.appendChild(about)
|
|
|
+
|
|
|
+ if(aboutLink.includes("http")) {
|
|
|
+ let button = document.createElement("button");
|
|
|
+ button.innerText = aboutLink;
|
|
|
+ button.onclick = () => {
|
|
|
+ fetch(`${button.innerText}`)
|
|
|
+ .then(res => res.json())
|
|
|
+
|
|
|
+ .then(direction => objectToDm(document.body, direction))
|
|
|
+ }
|
|
|
+ about.appendChild(button);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ let about = document.createElement("td");
|
|
|
+ about.style = "border: 2px solid black";
|
|
|
+ row.appendChild(about)
|
|
|
+
|
|
|
+ if(`${data[key]}`.includes("http")) {
|
|
|
+ let button = document.createElement("button");
|
|
|
+ button.innerText = data[key];
|
|
|
+ button.onclick = () => {
|
|
|
+ fetch(`${button.innerText}`)
|
|
|
+ .then(res => res.json())
|
|
|
+
|
|
|
+ .then(direction => objectToDm(document.body, direction))
|
|
|
+ }
|
|
|
+ about.appendChild(button);
|
|
|
+
|
|
|
+ } else {
|
|
|
+ about.innerText = `${data[key]}`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
