Подскажите, как оформить работающую функцию FETCH
(async () => {
const response = await fetch('https://api.spacexdata.com/v4/starlink/');
const data = await response.json();
for(const starlink of data) {
document.write(`<p>${starlink.id}</p>`);
}
})();
Это работает, но как можно это оформить в виде функции с именем, чтобы повесить onclick? мне вот это вступление покоя не даЕт (async () (с) эта часть с примера - просто function name(){ и вся фунцкия пробовал, но не работает)} до этого я подходил вообще так const textButton = document.getElementById('number');
const outputDiv = document.getElementById('output');
const textURL = 'https://api.spacexdata.com/v4/starlink';
textButton.addEventListener('click', () => {
fetch(textURL)
.then( response => {
outputDiv.innerHTML = 'Proszę poczekać';
if(response.ok) {
return response;
} throw Error(response.statusText);
})
.then( response => response.text() )
.then( text => outputDiv.innerText = text )
.catch( error => console.log('There was an error:', error))
}, false);
работает и клик работает, но оказалось, нельзя через текст Cпасибо |
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src='https://code.jquery.com/jquery-latest.min.js'></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
document.addEventListener("DOMContentLoaded", () => {
document.getElementById('btn').addEventListener('click',test)
function test() {
alert(1)
/*
(async () => {
const response = await fetch('https://api.spacexdata.com/v4/starlink/');
const data = await response.json();
for(const starlink of data) {
document.write(`<p>${starlink.id}</p>`);
}
})();
*/
}
})
</script>
</head>
<body>
<button id='btn'>Ok</button>
</body>
</html>
|
Konstantin47,
создавайте свои темы здесь Общие вопросы Javascript |
Konstantin47,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener( "DOMContentLoaded" , function() {
const spacex = async () => {
const response = await fetch('https://api.spacexdata.com/v4/starlink/');
let data = await response.json();
data = data.map(({id}) => `<p>${id}<\/p>`).join('');
out.insertAdjacentHTML('beforeend', data)
};
btn.addEventListener('click', spacex)
});
</script>
</head>
<body>
<button id='btn'>Ok</button>
<output id="out"></output>
</body>
</html>
|
А какие тут вообще проблемы?
<!DOCTYPE html>
<html>
<head>
<script>
async function test() {
const response = await fetch('https://api.spacexdata.com/v4/starlink/');
const data = await response.json();
for(const starlink of data) {
document.write(`<p>${starlink.id}</p>`);
}
}
</script>
</head>
<body>
<button id='btn' onclick="test()">Ok</button>
</body>
</html>
|
где - создавать темы, понял. Спасибо большое всем за помощь
|
Можно спросить, вот два варианта открывания информации. Почему через JSON показывает массив с ID номерами и все. Если зайти через консоль откроет тоже самое , что и через text. Что за это отвечает? какая строчка
<button id='number'>identyfikatory,nazwę,datę wystrzelenia</button> <button id='btn'>identyfikatory,nazwę,datę wystrzelenia2</button> <output id="out"></output> <div id='output'> const textButton = document.getElementById('number');
const outputDiv = document.getElementById('output');
const textURL = 'https://api.spacexdata.com/v4/starlink';
textButton.addEventListener('click', () => {
fetch(textURL)
.then( response => {
outputDiv.innerHTML = 'Proszę poczekać';
if(response.ok) {
return response;
} throw Error(response.statusText);
})
.then( response => response.text() )
.then( text => outputDiv.innerText = text )
.catch( error => console.log('There was an error:', error))
}, false);
document.addEventListener( "DOMContentLoaded" , function() {
const spacex = async () => {
const response = await fetch('https://api.spacexdata.com/v4/starlink/');
let data = await response.json();
data = data.map(({id}) => `<p>${id}<\/p>`).join('');
out.insertAdjacentHTML('beforeend', data)
};
btn.addEventListener('click', spacex)
});
|
А что передается с сервера?
Что у вас открывается и что в консоле, при таком оформлении примера мы не увидим. |
Konstantin47, очевидно за показ только id отвечает строка в которой показывают только id:
data = data.map(({id}) => `<p>${id}<\/p>`).join('');
P.S. document.write? Серьёзно? Пацаны, вы чего? Konstantin47, забудь об этом дерьме пока молодой, станешь сеньёром - тогда можешь юзать.) |
Цитата:
|
| Часовой пояс GMT +3, время: 21:44. |