Передача 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);
    });
  });
→ Ссылка