27.03.2021, 23:03
|
|
Аспирант
|
|
Регистрация: 12.01.2021
Сообщений: 32
|
|
|
Подскажите, как оформить работающую функцию 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пасибо
|
|
27.03.2021, 23:11
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,229
|
|
|
Сообщение от Konstantin47
|
|
как можно это оформить в виде функции с именем, чтобы повесить onclick?
|
Как вариант..
<!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>
|
|
27.03.2021, 23:17
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Konstantin47,
создавайте свои темы здесь Общие вопросы Javascript
|
|
27.03.2021, 23:33
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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>
|
|
27.03.2021, 23:40
|
 |
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,750
|
|
А какие тут вообще проблемы?
<!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>
|
|
27.03.2021, 23:49
|
|
Аспирант
|
|
Регистрация: 12.01.2021
Сообщений: 32
|
|
|
где - создавать темы, понял. Спасибо большое всем за помощь
|
|
30.03.2021, 11:12
|
|
Аспирант
|
|
Регистрация: 12.01.2021
Сообщений: 32
|
|
Можно спросить, вот два варианта открывания информации. Почему через 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)
});
|
|
30.03.2021, 11:53
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,750
|
|
|
А что передается с сервера?
Что у вас открывается и что в консоле, при таком оформлении примера мы не увидим.
|
|
30.03.2021, 23:34
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,590
|
|
Konstantin47, очевидно за показ только id отвечает строка в которой показывают только id:
data = data.map(({id}) => `<p>${id}<\/p>`).join('');
P.S. document.write? Серьёзно? Пацаны, вы чего? Konstantin47, забудь об этом дерьме пока молодой, станешь сеньёром - тогда можешь юзать.)
__________________
29375, 35
Последний раз редактировалось Aetae, 30.03.2021 в 23:38.
|
|
31.03.2021, 13:09
|
|
Аспирант
|
|
Регистрация: 12.01.2021
Сообщений: 32
|
|
Сообщение от Aetae
|
Konstantin47, очевидно за показ только id отвечает строка в которой показывают только id:
data = data.map(({id}) => `<p>${id}<\/p>`).join('');
P.S. document.write? Серьёзно? Пацаны, вы чего? Konstantin47, забудь об этом дерьме пока молодой, станешь сеньёром - тогда можешь юзать.)
|
PS простите, а, что юзать пока молодой? |
|
|
|
