DmitriyPanasenko
/
homework


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

  </script>

  <script>


    function buttonVisionText(button, element) {
      element.style.display = "block"

      button.innerText = 'Скрыть'
      button.style.backgroundColor = "SteelBlue"
      button.onclick = () => buttonHidetext(button, element)
    }

    function buttonHidetext(button, element) {
      element.style.display = "none"

      button.innerText = 'Показать'
      button.style.backgroundColor = "darkgrey"
      button.onclick = () => buttonVisionText(button, element)
    }

    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)
        //console.log(jsonObj[key])
        let regexp = /^\s*https?:\/\/./i; //тут проверяем является ли значение ссылкой

        if (regexp.test(jsonObj[key]) && typeof jsonObj[key] === "string") { //если значение ссылка но не массив

          const valueDiv = document.createElement('div') //div контейнер внутри ячейки
          tdValue.append(valueDiv)

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

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

          button.onclick = () => {
            fetch(jsonObj[key])
              .then(res => res.json())
              .then(obj => {
                jsonToTable(valueDiv, obj)
                button.innerText = 'Cкрыть'
                button.style.backgroundColor = "SteelBlue"
                button.onclick = () => buttonHidetext(button, valueDiv) //вешаем на кнопку, изменяемый при каждом нажатии, онклик скрывающий или отображающий контент внутри ячейки
              })
          }
        } else if (Array.isArray(jsonObj[key])) {

          for (arrayItem of jsonObj[key]) {
            console.log(arrayItem)
            if (regexp.test(arrayItem) && typeof arrayItem === "string") {
              //если значение ссылка и строка

              const valueDiv = document.createElement('div') //div контейнер внутри ячейки
              tdValue.append(valueDiv)

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

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

              button.onclick = () => {
                fetch(arrayItem)
                  .then(res => res.json())
                  .then(obj => {
                    jsonToTable(valueDiv, obj)
                    button.innerText = 'Cкрыть'
                    button.style.backgroundColor = "SteelBlue"
                    button.onclick = () => buttonHidetext(button, valueDiv) //вешаем на кнопку, изменяемый при каждом нажатии, онклик скрывающий или отображающий контент внутри ячейки
                  })
              }
            } else {

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