123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- // fetch basic
- // С помощью следующего кода считать и вывести информацию о Люке Скайвокере:
- // fetch('https://swapi.dev/api/people/1/')
- // .then(res => res.json())
- // .then(luke => console.log(luke))
- // Напишите функцию для отображения любого JSON в форме таблицы.
- // Функция должна принимать два параметра:
- // * DOM - элемент, в котором строится таблица
- // * JSON, который нужно отобразить.
- // fetch improved
- // Расширить функцию отображения:
- // * Если одно из полей строка или массив.
- // * Если строки или строка содержат в себе https://swapi.dev/api/, то выводить вместо текста строки кнопку,
- // при нажатии на которую:
- // * делается fetch данных по этой ссылке
- // * функция отображения запускает сама себя(рекурсивно)
- // для отображения новых данных в том же элементе.
- fetch('https://swapi.dev/api/people/1/')
- .then(res => res.json())
- .then(luke => renderTable(document.body, luke))
- function renderTable(parent, obj) {
- let $table = document.createElement('table')
- for (let key in obj) {
- let $tr = document.createElement('tr')
- let $td = document.createElement('td')
- let $td2 = document.createElement('td')
- if (Array.isArray(obj[key])) {
- for (let item of obj[key]) {
- let newTable = document.createElement('table')
- let newTr = document.createElement('tr')
- let newTd = document.createElement('td')
- linkChecker(item, newTd)
- newTr.append(newTd)
- newTable.append(newTr)
- $td2.append(newTable)
- }
- }
- else {
- linkChecker(obj[key], $td2)
- }
- $td.innerHTML = key
- $tr.append($td, $td2)
- $table.appendChild($tr)
- }
- parent.appendChild($table)
- }
- function linkChecker(str, container) {
- if (typeof str === 'string') {
- if (str.includes('https://swapi.dev/api/')) {
- let btn = document.createElement('button')
- btn.innerHTML = 'Show'
- btn.onclick = () => {
- fetch(str).then(r => r.json())
- .then(r => renderTable(container, r))
- }
- container.append(btn)
- } else {
- container.innerHTML = str
- }
- }
- }
- // myfetch
- // Используя XMLHTTPRequest, напишите промисифицированную функцию myfetch, т.е. функцию, которая
- // возвращает промис, и работает схоже с fetch, только в один этап:
- // myfetch('https://swapi.dev/api/people/1/')
- // .then(luke => console.log(luke))
- // Функция myfetch ожидает что ответ будет в формате JSON (используйте JSON.parse(response.text))
- // В случае ошибок (request.onerror или request.status не 200) не забудьте вызывать reject
- // function myfetch(url){
- // return new Promise(function (resolve, reject){
- // const xhr = new XMLHTTPRequest()
- // ///...
- // })
- // }
- myfetch('https://swapi.dev/api/people/10/')
- .then(kenobi => console.log(kenobi))
- function myfetch(url) {
- return new Promise(function (resolve, reject) {
- const xhr = new XMLHttpRequest();
- xhr.onreadystatechange = function () {
- if (xhr.readyState != 4) {
- return;
- }
- if (xhr.status == 200) {
- resolve(JSON.parse(xhr.responseText));
- } else {
- reject('error')
- }
- }
- xhr.open('GET', url, true);
- xhr.send(null);
- })
- }
|