Чтение JSON в интерфейс HTML через NODE.JS

Question

Хочу сделать HTML-CSS-JS для чтения файлов из файла JSON. Но ничего не выходит.

const productTable = document.getElementById('productTable').getElementsByTagName('tbody')[0];

// Замените 'data.json' на путь к вашему файлу JSON
fetch('data.json')
  .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);
    });
  });

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="productTable">
        <thead>
            <tr>
                <th>Product Name</th>
                <th>Quantity</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <!-- Товары будут здесь -->
        </tbody>
    </table>
    <script src="main.js"></script>
</body>
</html>

Не сложный JSON имеется.

[
    {
      "name": "Product 1",
      "quantity": 10,
      "price": 25.00
    },
    {
      "name": "Product 2",
      "quantity": 5,
      "price": 15.00
    }
  ]

Все файлы лежат в одной папке (в корне). Хотелось бы обойтись вообще без запуска сервера, но если так чтение не возможно, то вопрос такой: почему на сервере не работает чтение JSON

 const http = require ('http');
 const fs = require('fs');

//localhost:3000
http.createServer(function(req, res){
    console.log('server work');
    let data = fs.readFileSync('./index.html');
    // res.write('Hello World');
    res.write(data);
    res.end();
}).listen(3000);

Answer 1

Научись запускать консоль без vscode.

Если хочешь без сервера, то переименуй файл в js, напиши в начале перед json'ом var data = и подключи к странице. Потом вместо fetch обращайся к data. Или, чтобы сделать более по-человечески и была возможность ничего не сломав переделать на fetch: Promise.resolve(data).

Очевидно, что сервер из вопроса умеет отдавать только index.html на любой запрос - и больше ничего.

Answer 2

В ходе коментариев я убедился что без Сервера, и как минимум, библиотеки express никуда. Маршруты проставил половина дела сделана. Код подключенной библиотеки EXpress. Единственная проблема что теперь не читает HTML

const express = require('express');
const app = express();
const fs = require('fs');

app.get('/readJSON', (req, res) => {
    fs.readFile('./data.json', 'utf8', (err, jsonString) => {
        if (err) {
            console.log("Ошибка чтения файла с диска:", err);
            return;
        }
        try {
            const jsonData = JSON.parse(jsonString);
            res.json(jsonData);
        } catch(err) {
            console.log('Ошибка преобразования JSON строки:', err);
        }
    })
})

app.listen(3000, () => console.log('Сервер работает на порту 3000'));

Далее следует обращаться по адресу

http://localhost:3000/readJSON.

БЛОГ НА HUSL

Чтение JSON в интерфейс HTML через NODE.JS

Ответы (2 шт):