|
|
@@ -0,0 +1,88 @@
|
|
|
+/*fetch basic
|
|
|
+Исследуйте сайт swapi.dev, рассмотрите JSON-ы, которые предоставляются этим сервисом (например: https://swapi.dev/api/people/1/, https://swapi.dev/api/people/2/, https://swapi.dev/api/starships/12/
|
|
|
+С помощью следующего кода считать и вывести информацию о Люке Скайвокере:
|
|
|
+fetch('https://swapi.dev/api/people/1/')
|
|
|
+ .then(res => res.json())
|
|
|
+ .then(luke => console.log(luke))
|
|
|
+Напишите функцию для отображения любого JSON в форме таблицы. Функция должна принимать два параметра:
|
|
|
+DOM - элемент, в котором строится таблица
|
|
|
+JSON, который нужно отобразить.*/
|
|
|
+{
|
|
|
+ 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)
|
|
|
+ tdValue.innerText = jsonObj[key]
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ fetch('https://swapi.dev/api/people/1/')
|
|
|
+.then(res => res.json())
|
|
|
+.then(jsonObj => jsonToTable(document.body, jsonObj))
|
|
|
+}
|
|
|
+
|
|
|
+/* fetch improved
|
|
|
+Расширить функцию отображения:
|
|
|
+Если одно из полей строка или массив.
|
|
|
+Если строки или строка содержат в себе https://swapi.dev/api/
|
|
|
+То выводить вместо текста строки кнопку, при нажатии на которую:
|
|
|
+делается fetch данных по этой ссылке
|
|
|
+функция отображения запускает сама себя(рекурсивно) для отображения новых данных в том же элементе.*/
|
|
|
+
|
|
|
+
|
|
|
+{
|
|
|
+ function buttonVisionText()
|
|
|
+
|
|
|
+ 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 = 'Показать'
|
|
|
+ button.onclick = () => { fetch(jsonObj[key])
|
|
|
+ .then(res => res.text())
|
|
|
+ .then(txt => {
|
|
|
+ tdValue.innerText = txt
|
|
|
+ button.innerText = 'скрыть'
|
|
|
+ })}
|
|
|
+ }else{
|
|
|
+ tdValue.innerText = jsonObj[key] //если не является запихиваем занчение в innertext
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ fetch('https://swapi.dev/api/people/1/')
|
|
|
+.then(res => res.json())
|
|
|
+.then(jsonObj => jsonToTable(document.body, jsonObj))
|
|
|
+}
|
|
|
+
|
|
|
+const value = 'nhfnfnfn'
|
|
|
+const td = document.createElement('td')
|
|
|
+
|
|
|
+
|
|
|
+const button = document.createElement('button')
|
|
|
+button.innerText = 'Показать'
|
|
|
+function buttonVisionText(element, text) {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function buttonHidetext()
|
