Помогите, я подключаю html к api, никак не работает
покажи свой html и апишку, но перед этим проверь запустил ли ты сервер. Возможно смогу помочь.
Может в гугл встречах обсудим вместе
не думаю что это такой сложный вопрос чтобы запускать встречу) просто скопируй html и вставь в текст “как есть” в редакторе.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neocities Site with API</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#apiResponse {
margin-top: 20px;
font-size: 18px;
color: darkblue;
}
</style>
</head>
<body>
<h1>Welcome to My Neocities Site</h1>
<button id="getApiData">Get Data from API</button>
<p id="apiResponse"></p>
<script>
document.getElementById('getApiData').addEventListener('click', async () => {
const apiUrl = 'https://organic-spork-wr9p55qq477qf5r6x-13195.app.github.dev/api';
try {
const response = await fetch(apiUrl);
// Проверяем статус ответа
if (!response.ok) {
throw new Error(`Ошибка при запросе API: ${response.status} ${response.statusText}`);
}
const data = await response.json();
document.getElementById('apiResponse').textContent = data.message;
} catch (error) {
console.error('Ошибка:', error);
document.getElementById('apiResponse').textContent = 'Не удалось получить данные из API.';
}
});
</script>
</body>
</html>
немного старый подход для написания html) чтобы api нормально работал советую создать отдельный .js файл (например script.js) в котором будут храниться весь код в теге "<script "и уже когда такой файл есть то добавить строку:
<script src="script.js"></script>
Тогда и читаемость кода будет проще и решиться проблема с тем что не работает апишка.
Не работает
тогда опиши как ты запускаешь сервер, заходишь на локальный сайт, и какую ошибку выдает.
У меня api на vscode web это сайт
Привет! Попробовал скопировать к себе в VSCode и запустить через плагин Live Server. При попытке нажаться кнопку Get Data From Api в консоли ошибка:
Подозреваю, что-то не так с url, откуда ты пытаешься сделать fetch.
Давай в Ватсапп или гугл встречах
На данный момент не могу - ухожу из дома скоро. Если только вечером или завтра с утра. У тебя точно адрес правильный? Или ты сюда специально вставил “порченный” из-за NDA?
Нет, давай вечером
Я подставил моковый URL с сайта JSONPlaceholder (https://jsonplaceholder.typicode.com/posts) - код работает корректно. Единственный нюанс в строке
document.getElementById('apiResponse').textContent = data.message;
Если посмотреть в консоли, что из себя представляет const data, то видно, что это массив объектов. Кроме того, свойства “message”, к которому обращается
data.message
, у него нет. Поэтому, чтобы вывести эту информацию, нужен цикл.
И что мне делать
В цикле сформировать строку, которую ты хочешь вставить с помощью textContent, а уже после цикла вставить эту строку с помощью textContent
Будет выглядеть примерно так:
const data = await response.json() // здесь в data запишется массив объектов
let strToInsert = " "; // подготавливаем строку, которую будем формировать в цикле
data.forEach(el => str += el.message); // если у тебя в твоём массиве объектов есть поле message
Ну, в дальше -
… textContent = strToInsert;
советую удалить это сообщение чтобы никто не отправлял спам ботов на твой номер