Как отобразить ответ API в HTML
Хотя я успешно получил данные, мне не удается эффективно отобразить их в формате HTML.
Единственный способ, которым это работает (насколько далеко я продвинулся), — это использовать две конечные точки. Одна конечная точка предназначена для загрузки данных API, а другая конечная точка — для загрузки HTML с помощью сценария.
(С двумя конечными точками я получаю данные, загруженные в HTML, но сначала нужно загрузить первую, а затем вторую, что я считаю не лучшим решением)
Конечные точки:
//rest of the code
app.get("/", async(req, res) => {
const weatherData = await fetchData();
res.send(weatherData);
});
app.get("/test", (req,res) =>{
res.sendFile(__dirname + "/public/home.html");
});
//rest of the code
Скрипт:
fetch("/")
.then(response => response.json())
.then(weatherData => {
document.getElementById("test").innerHTML = weatherData.resolvedAddress;
document.getElementById("test1").innerHTML = weatherData.description;
document.getElementById("test2").innerHTML = weatherData.days[0].temp;
document.getElementById("test3").innerHTML = weatherData.days[0].tempmax;
document.getElementById("test4").innerHTML = weatherData.days[0].tempmin;
document.getElementById("test5").innerHTML = weatherData.days[0].description;
})
.catch(error => console.info(error));
У меня вопрос: есть ли способ объединить две конечные точки (которые данные загружаются в html)?
это во многом недостает контекста. Например, как вы хотите отображать данные и как выглядит JSON. Является ли HTML шаблоном или как выглядит его структура. Я настоятельно рекомендую вам не использовать innerHTML, а textContent. Пожалуйста, включите соответствующий HTML-код и пример вашего JSON.
Ответы 2
вы можете использовать механизм шаблонов HTML, чтобы упростить заполнение данных. например EJS или pug.
для эйса:
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
const data = { title: "EJS Example", user: { name: "John" }, items: ["item1", "item2"] };
res.render('index', data);
});
app.listen(3000);
views/index.ejs:
<h1>Hello, <%= user.name %>!</h1>
<ul>
<% items.forEach(item => { %>
<li><%= item %></li>
<% }); %>
</ul>
Спасибо за ответ! Есть ли способ сделать это без установки каких-либо зависимостей? Я буду исследовать EJS!
У меня вопрос: есть ли способ объединить две конечные точки (которые данные загружаются в html)?
Для более удобной работы вам следует рассмотреть возможность использования механизма шаблонов, такого как EJS или аналогичной библиотеки, как предложил Арнашиа.
Есть ли способ сделать это без установки каких-либо зависимостей?
Метод, который вы сейчас используете, действительно является правильным подходом, если вы хотите добиться этого без установки каких-либо зависимостей.
response.jsonэто не HTML