|
|
@@ -0,0 +1,76 @@
|
|
|
+function createBtn(text) {
|
|
|
+ let btn = document.createElement('button')
|
|
|
+ btn.innerText = `${text}`
|
|
|
+ return btn
|
|
|
+}
|
|
|
+
|
|
|
+function drawObjTable(parent, obj) {
|
|
|
+ let table = document.createElement('table')
|
|
|
+ table.border = 1
|
|
|
+ table.style.border = '5px double grey'
|
|
|
+ let closeRow = document.createElement('tr')
|
|
|
+ let closeTd = document.createElement('td')
|
|
|
+ closeTd.style.border = 'none'
|
|
|
+ let closeBtn = createBtn('Close table')
|
|
|
+ closeBtn.style.backgroundColor = 'firebrick'
|
|
|
+ closeBtn.style.color = 'white'
|
|
|
+ closeBtn.onclick = () => parent.removeChild(table)
|
|
|
+
|
|
|
+ closeTd.append(closeBtn)
|
|
|
+ closeRow.append(closeTd)
|
|
|
+ table.append(closeRow)
|
|
|
+
|
|
|
+ for (let key in obj) {
|
|
|
+ let tr = document.createElement('tr')
|
|
|
+ let tdKey = document.createElement('td')
|
|
|
+ tdKey.innerText = key
|
|
|
+ tdKey.style.backgroundColor = 'black'
|
|
|
+ tdKey.style.color = 'white'
|
|
|
+
|
|
|
+ let tdValue = document.createElement('td')
|
|
|
+ tdValue.style.backgroundColor = 'grey'
|
|
|
+ tdValue.style.color = 'whitesmoke'
|
|
|
+
|
|
|
+ if (obj[key].constructor.name === 'Array') {
|
|
|
+ let i = 0
|
|
|
+ for (let item of obj[key]) {
|
|
|
+ i++;
|
|
|
+ console.log('current', item)
|
|
|
+ if (typeof item === 'string' && /^(https:\/\/|http:\/\/)/.test(item)) {
|
|
|
+ let btn = createBtn(i)
|
|
|
+
|
|
|
+ fetch(item)
|
|
|
+ .then(res => res.json())
|
|
|
+ .then(obj => {
|
|
|
+ btn.innerText = obj[Object.keys(obj)[0]]
|
|
|
+ btn.onclick = () => { drawObjTable(container, obj) }
|
|
|
+ })
|
|
|
+
|
|
|
+ tdValue.append(btn)
|
|
|
+ } else {
|
|
|
+ tdValue.innerText = item
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (typeof obj[key] === 'string' && /^(https:\/\/|http:\/\/)/.test(obj[key])) {
|
|
|
+ let btn = createBtn(key)
|
|
|
+ btn.onclick = () => request_N_redraw(obj[key])
|
|
|
+ tdValue.append(btn)
|
|
|
+ } else {
|
|
|
+ tdValue.innerText = obj[key]
|
|
|
+ }
|
|
|
+
|
|
|
+ tr.append(tdKey, tdValue)
|
|
|
+ table.append(tr)
|
|
|
+ }
|
|
|
+ parent.append(table)
|
|
|
+}
|
|
|
+
|
|
|
+let container = document.createElement('div')
|
|
|
+document.body.append(container)
|
|
|
+
|
|
|
+fetch('https://swapi.dev/api/people/1/')
|
|
|
+ .then(res => res.json())
|
|
|
+ .then(luke => {
|
|
|
+ console.log(luke)
|
|
|
+ drawObjTable(container, luke)
|
|
|
+ })
|
