Javascript/HTML: Show a table from JSON data stored in LittleFS (ESP32)

I'm trying to show a table in HTML from a JSON file stored in LittleFS in ESP32 microcontroller.

This file (named log.txt in LittleFS) is updated from a RFID routine or manually by /manage-users page, and this functions are working.

The JSON file is correctly uploaded and readed by the program (ArduinoJson.h) and the structure is:

[
  {
    "room": 302,
    "uid": "AAAAAAAA",
    "guest": 2,
    "hour": "20/05/25 10:45"
  },
  {
    "room": 203,
    "uid": "BBBBBBBB",
    "guest": 1,
    "hour": "05/12/91 10:25"
  }
]

I'm trying to show it in a HTML table with javascript but I fail miserably, the data is coming from:

server.on("/view-log", HTTP_GET, [](AsyncWebServerRequest* request) {
    request->send(LittleFS, "/log.txt", "text/plain", false);
});

This is served from ESPAsyncWebServer.h library, the HTML code is:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="refresh" content="30">
        <meta charset="UTF8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>ESP WEBSERVER</title>
        <link rel="stylesheet" href="style.css">
    </head>
<body>
    <nav>
        <div class="nav-container">
            <a href="/" class="brand">User Management</a>
            <ul class="nav-menu">
                <li><a href="/"> full log</a></li>
                <li><a href="add-user">Add user</a></li>
                <li><a href="manage-users">Manage users</a></li>
            </ul>
        </div>
    </nav>
    <div class="main-container">
        <section class="main-selection">
            <h2>Full access log</h2>
            <table id="tableData">
                <thead>
                    <tr>
                        <th>Room</th>
                        <th>Uid</th>
                        <th>Guest</th>
                        <th>hour</th>
                    </tr>                       
                </thead>
                <tbody id="data-output">
                    <!-- DATA -->
                </tbody>
            </table>
        </section>
    </div>
    <div class="main-container">
        <a href="get?delete=log"><buttton class="button button-delete">DELETE log.txt</button></a>
    </div>
    <script>
        async function loadTableData(){
            try{
                const response = await fetch('view-log');
                const data = await reponse.text();
                var table = document.getElementById('data-output')
                for (var i = 0; i < data.length; i++){
                    var row = `<tr>
                            <td>${data[i].room}</td>
                            <td>${data[i].uid}</td>
                            <td>${data[i].guest}</td>
                            <td>${data[i].hour}</td>
                        </tr>`
                    tab.innerHTML += row
                }
            } catch (error) {
                console.error('Error loading log data:', error);
            }
        }
        loadTableData();
    </script>
</body>
</html>

In the browser console I'm getting the error

(index):58 Error loading log data: ReferenceError: reponse is not defined at loadTableData ((index):46:18)

Probably for the way i'm feeding data to the script, but I'm completely a noob with javascript so I'm forced to ask for help here. By now I'm feeding the table in only HTML code but it's not fittable in an expasion of the website so I want to reach a javascript solution for this kind of problem. Thank you in advance for helping me!

Solution

There are a few issues in the script:

1st one: reponse should be response

2nd one: I think ur fetching a plain text file which has JSON data, and then you're treating like an array.

Finally: You may need to parse the text into JSON object.

Here is the update script:

async function loadTableData(){
        try {
            const response = await fetch('view-log'); // fixed typo here
            const textData = await response.text(); // get text content
            const data = JSON.parse(textData); // parse JSON from text

            const table = document.getElementById('data-output'); // fixed ID name

            data.forEach(entry => {
                const row = `<tr>
                    <td>${entry.room}</td>
                    <td>${entry.uid}</td>
                    <td>${entry.guest}</td>
                    <td>${entry.hour}</td>
                </tr>`;
                table.innerHTML += row;
            });
        } catch (error) {
            console.error('Error loading log data:', error);
        }
    }
    loadTableData();