DmitriyPanasenko
/
homework


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    
</head>
<body>
    
    
    <script>
        function buttonVisionText(button, element, innertext) {
    element.innerText = innertext
    button.innerText = 'Скрыть'
    button.onclick = () => buttonHidetext(button, element, innertext)
  }
  
  function buttonHidetext(button, element, innertext) {
    element.innerText = ""
    button.innerText = 'Показать'
    button.onclick = () => buttonVisionText(button, element, innertext)
  }

  function jsonToTable(parent = document.body, jsonObj){
      const jsonTable = document.createElement('table') //Создаём и добавляем в родительский єлемент будущую таблицу
      parent.append(jsonTable)

      for (const key in jsonObj){
          const tr = document.createElement('tr') //одно свойтсво - одна строка
          jsonTable.append(tr)
          
          const tdProperty = document.createElement('td') //столбик со свойствами обьекта
          tr.append(tdProperty)
          tdProperty.innerText = key

          const tdValue = document.createElement('td') // столбик со значениями свойств обьекта JSON
          tr.append(tdValue)
                    
          let regexp = /^\s*https?:\/\/./i; //тут проверяем является ли значение ссылкой
          if ( regexp.test(jsonObj[key]) ) {

            const button = document.createElement('button') // если да то создаём кнопку, текст изначально скрыт
            tdValue.append(button)
            button.innerText = 'Показать'

            let value 

            //при первом нажатии получаем данные по ссылке, сохраняем в value и выводим

            button.onclick = () => {
              fetch(jsonObj[key]) 
              .then(res => res.text())
              .then(txt => {
                tdValue.innerText = txt
                button.innerText = 'Cкрыть'
                button.onclick = () => buttonHidetext(button, tdValue, txt)
              })
            }
          }else{
            tdValue.innerText = jsonObj[key] //если значение не является ссылкой, запихиваем занчение в innertext 
          }
      }
  }

  fetch('https://swapi.dev/api/people/1/')
    .then(res => res.json())
    .then(jsonObj => jsonToTable(document.body, jsonObj))
    </script>
</body>

</html>