123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- 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(`Loading...`)
- btn.disabled = true
-
- fetch(item)
- .then((res) => {
- if(res.ok) {
- return res.json()
- } else {
- throw new Error()
- }
-
- })
- .then(obj => {
- btn.disabled = false
- btn.innerText = obj[Object.keys(obj)[0]]
- btn.onclick = () => { drawObjTable(container, obj) }
- })
- .catch(e => console.warn('something bad happened ', e))
- tdValue.append(btn)
- } else {
- tdValue.innerText = item
- }
- }
- } else if (typeof obj[key] === 'string' && /^(https:\/\/|http:\/\/)/.test(obj[key])) {
- let btn = createBtn(key)
- btn.disabled = true
-
- fetch(obj[key])
- .then(res => res.json())
- .then(obj => {
- btn.disabled = false
- btn.innerText = obj[Object.keys(obj)[0]]
- btn.onclick = () => { drawObjTable(container, obj) }
- })
- .catch(e => console.warn('something bad happened ', e))
- 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) => {
- if(res.ok) {
- return res.json()
- } else {
- throw new Error()
- }
- })
- .then(luke => {
- drawObjTable(container, luke)
- })
- .catch((e) => console.warn('something bad happpened ', e))
|