Передача JSON в интерфейс HTML (Express)
Есть условный список продуктов products.json
, хочется чтоб он был на экране Вэб страницы локального сервера Express
Серверная часть:
const express = require('express');
const app = express();
const port = 3000;
let data = require('./products.json'); // подключение JSON файла
app.use(express.static('public')); // Используем публичную папку для наших статических файлов
app.get('/products', (req, res) => {
res.json(data);
});
app.listen(port, () => console.log(`Сервер запущен на порту: ${port}`));
fetch('/products')
.then(response => response.json())
.then(products => {
let productDiv = document.getElementById('productList');
products.forEach(product => {
let div = document.createElement('div');
div.className = 'product';
div.textContent = 'Название:${product.name}', 'Количество:${product.quantity}';
productDiv.appendChild(div);
});
})
.catch(error => console.error('Ошибка:', error));
body {
font-family: Arial, sans-serif;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
<!DOCTYPE html>
<html>
<head>
<title>Product Inventory</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Product Inventory</h1>
<table id="productList">
<thead>
<tr>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<!-- Товары будут здесь -->
</tbody>
</table>
<script src="main.js"></script>
</body>
</html>
Сервер запускается, также видит
http://localhost:3000/products
Также выводит основной HTML и CSS но не подставляет данные из JSON В место данных пишет в графе "Products Name"
Название:${product.name}
Название:${product.name}
Название:${product.name}
В JS - ошибка со строкой div.textContent = 'Название:${product.name}', 'Количество:${product.quantity}'; А может не только там
Ответы (1 шт):
Автор решения: Иван Белобородов
→ Ссылка
Заменил JS на это и все заработало. Неправильно работал Fetch, еще бы понять что там работало неправильно. Буду рад коментариям. Еще поделитесь, как запустить сервер исполнительным файлом чтоб даже терминал не залезать ?
const productTable = document.getElementById('productList').getElementsByTagName('tbody')[0];
// Замените 'data.json' на путь к вашему файлу JSON
fetch('/products')
.then(response => response.json())
.then(data => {
data.forEach(item => {
const row = document.createElement('tr');
const nameCell = document.createElement('td');
nameCell.textContent = item.name;
row.appendChild(nameCell);
const quantityCell = document.createElement('td');
quantityCell.textContent = item.quantity;
row.appendChild(quantityCell);
const priceCell = document.createElement('td');
priceCell.textContent = item.price;
row.appendChild(priceCell);
productTable.appendChild(row);
});
});