<body>
<div class="main-body">
<div class="hotel-block">
<img src="https://i2.photo.2gis.com/images/branch/0/30258560076741797_1cd9.jpg" alt="" class="hotel-1">
<h2></h2>
<p class="chertochka"></p>
<h2></h2>
<a class="click-btn btn-style2" href="./contact.html">List</a>
</div>
<div class="hotel-block">
<img src="https://avatars.dzeninfra.ru/get-zen_doc/2404797/pub_5ec05dabc419064bb24dcdcb_5ec07408d54088764522e780/scale_1200" alt="" class="hotel-1">
<h2></h2>
<p class="chertochka"></p>
<h2></h2>
<a class="click-btn btn-style2" href="./contact.html">List</a>
</div>
<div class="hotel-block">
<img src="https://www.worldrainbowhotels.com/wp-content/uploads/2019/05/Crown-Metropol-Perth.jpg" alt="" class="hotel-1">
<h2></h2>
<p class="chertochka"></p>
<h2></h2>
<a class="click-btn btn-style2" href="./contact.html">List</a>
</div>
<div class="hotel-block">
<img src="https://alanya-invest.ru/upload/iblock/6e4/6e43b827a3ff50d381f95697957f30b5.jpg" alt="" class="hotel-1">
<h2></h2>
<p class="chertochka"></p>
<h2></h2>
<a class="click-btn btn-style2" href="./contact.html">List</a>
</div>
<div class="hotel-block">
<img src="https://static.tildacdn.com/tild3537-6330-4633-a535-363963343564/IMG_5600_24-10-2018_.jpg" alt="" class="hotel-1">
<h2></h2>
<p class="chertochka"></p>
<h2></h2>
<a class="click-btn btn-style2" href="./contact.html">List</a>
</div>
<div class="hotel-block">
<img src="https://s01.cdn-pegast.net/get/ff/7a/6a/14fc6c3317967b5913591d23b20ead97a39bc3027cc726ed1f4188c23a/5f3534cc2c556.jpg" alt="" class="hotel-1">
<h2></h2>
<p class="chertochka"></p>
<h2></h2>
<a class="click-btn btn-style2" href="./contact.html">List</a>
</div>
</div>
</body>
<footer>
<div class="icons-list">
<li class="icons">Phone number - 8 926 745 64 43</li>
<li class="icons">Social Network - @grammyf</li>
</div>
</footer>
<script src="bd.js">
const mysql = require('mysql');
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'root',
database: 'hotelsDB'
});
connection.connect((err) => {
if (err) {
console.error('Ошибка подключения к базе данных: ', err);
return;
}
console.log('Подключение к базе данных успешно');
connection.query('SELECT * FROM hotels', (err, rows) => {
if (err) {
console.error('Ошибка выполнения запроса: ', err);
return;
}
const hotels = rows.map(row => {
return {
hotel_name: row.hotel_name,
price: row.price,
description: row.description
};
});
'Массив отелей:', JSON.stringify(hotels)
hotelsArray = hotels.splice(0, 6)
console.log(JSON.stringify(hotelsArray.splice(0, 6)))
module.exports = hotels;
});
connection.end((err) => {
if (err) {
console.error('Ошибка закрытия соединения с базой данных: ', err);
return;
}
console.log('Лан наебал оно опять открыто');
});
});
const hotelBlocks = document.querySelectorAll('.hotel-block'); !!!
hotelsArray.forEach(hotel => {
const hotelElement = document.createElement('div');
hotelElement.innerHTML = `
<div class="hotel-block">
<h2>${hotel.hotel_name}</h2>
<p>Цена: $ ${hotel.price}</p>
<p>${hotel.description}</p>
<a class="click-btn btn-style2" href="./contact.html">List</a>
</div>
`;
hotelsContainer.appendChild(hotelElement);
})
</script>
There is a data array in the variable hotelsArray that is formed as a result of the script. How can I transfer data from the JSON array to the HTML page? I tried selecting the .hotel-block tag and creating a loop for each element in the array to create div elements, but when I run the script in a separate file, it only outputs the array data. When I embed the script on the HTML page, the code doesn’t work. What can I do about this? I need to create divs with specific data on the page. How can I do this without using PHP, only JS and NodeJS