12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- //fetch basic / fetch improved
- function fetchBasic(element, jsonStr) {
- let table = document.createElement('table');
- table.style.fontFamily = 'sans-serif';
- for (const key in jsonStr) {
- let tr = document.createElement('tr');
- let tdKey = document.createElement('th');
- let tdValue = document.createElement('td');
- tdKey.textContent = key;
- if(typeof jsonStr[key] === 'string' && jsonStr[key].includes('https://swapi.dev/api/')) {
- let button = document.createElement('button');
- button.textContent = jsonStr[key];
- button.onclick = () => {
- fetch(jsonStr[key])
- .then(res => res.json())
- .then(luke => fetchBasic(tdValue, luke));
- }
- button.style.border = 'transparent';
- button.style.backgroundColor = 'transparent';
- button.style.fontSize = '16px'
- button.style.padding = '0'
- button.style.cursor = 'pointer'
- tdValue.append(button);
- }
- else if(Array.isArray(jsonStr[key])) {
- jsonStr[key].forEach((item) =>{
- if (typeof item === 'string' && item.includes('https://swapi.dev/api/')){
- let button = document.createElement('button');
- button.textContent = item;
- button.onclick = () => {
- fetch(item)
- .then(res => res.json())
- .then(luke => fetchBasic(tdValue, luke));
- }
- button.style.border = 'transparent';
- button.style.backgroundColor = 'transparent';
- button.style.fontSize = '16px'
- button.style.padding = '0'
- button.style.cursor = 'pointer'
- tdValue.append(button);
- }
- else {
- tdValue.append = item
- }
- })
- }
- else if(typeof jsonStr[key] === 'object' && jsonStr[key] !== null){
- for (const key in jsonStr[key]) {
- let obj = document.createElement('p');
- obj.textContent = `${key}: ${jsonStr[key]}`;
- tdValue.append(obj)
- }
- }
- else{
- tdValue.textContent = jsonStr[key];
- }
- tr.append(tdKey);
- tr.append(tdValue);
- table.append(tr);
- for (let cell of tr.cells) {
- cell.style.border = '2px solid #000';
- cell.style.padding = '10px';
- cell.style.textAlign = 'left';
- cell.classList.add('td');
- }
- }
- element.append(table);
- }
- fetch('https://swapi.dev/api/people/1/')
- .then(res => res.json())
- .then(luke => fetchBasic(containerForm, luke));
- //myfetch
- function myfetch(url){
- return new Promise(function (resolve, reject){
- let xhr = new XMLHttpRequest();
- xhr.open("GET", url, true);
- xhr.send();
- xhr.onload = () => xhr.status !== 200 ? reject() : resolve(JSON.parse(xhr.responseText));
- xhr.onerror = () => reject();
- })
- }
- myfetch('https://swapi.dev/api/people/1/')
- .then(luke => console.log(luke), () => console.log('Error:'))
- //race
- const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms));
- Promise.race([myfetch('https://swapi.dev/api/people/1/'), delay(2080)])
- .then(value => console.log(value), () => console.log('Error'));
|