Populating a table with information retrieved from a file stored on the local server

Question

Populating a table with information retrieved from a file stored on the local server

Here is the specific table I am working with:

<div class="chartHeader"><p>Performance statistics summary</p></div>
<table id="tableSummary">
    <tr>
        <th>Measurement name</th>
        <th>Result</th>
    </tr>
    <tr>
        <td>Total messages sent</td>
        <td id = "totalMessagesSent"></td>
    </tr>
    <tr>
        <td>Total messages processed</td>
        <td id = "totalMessagesProcessed"></td>
    </tr>
    <tr>
        <td>Average messages per second</td>
        <td id = "averageMessagesPerSecond"></td>
    </tr>
</table>

I have a JSON file generated in Groovy stored somewhere on my disk:

{
    "reportSummary": {
        "totalMessagesSent": 23,
        "totalMessagesProcessed": 10384,
        "averageMessagesPerSecond": 2.3E-8
    }
}

I've been trying to populate the table above with data from this JSON using JavaScript, but so far I haven't been successful. In my HTML page, I have added:

<script type="text/javascript">fillTableWithData('reportSummary.json');</script>

Currently, my script looks like this, but it's not functioning as intended:

function fillTableWithData(filename) {
    var reader = new FileReader();
    var jsonFile = reader.readAsText(filename);
    var jsons = d3.json(jsonFile);

    d3.select("#totalMessagesSent").append(jsons.totalMessagesSent);
    d3.select("#totalMessagesProcessed").append(jsons.totalMessagesProcessed);
    d3.select("#averageMessagesPerSecond").append(jsons.averageMessagesPerSecond);
}

If anyone has suggestions on how to correctly achieve this task, please let me know. I've spent a lot of time on it and I'm currently out of ideas. Thank you in advance for your help.

EDIT: If it's easier to do it in pure JS, I don't necessarily need to use d3 for this task...

javascript json d3.js

Answer 1

Answer №1

Look no further for the solution to that issue:

function loadDataIntoTable(file) {

var dataFile = file;
var httpRequest = new XMLHttpRequest();
try {
    httpRequest = new XMLHttpRequest();
} catch (error) {
    try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (error) {
        try {
            httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (error) {
            alert("Oops, looks like your browser is having issues!");
            return false;
        }
    }
}
httpRequest.onreadystatechange = function () {
    if (httpRequest.readyState == 4) {
        var jsonData = JSON.parse(httpRequest.responseText);

        document.getElementById("messagesReceived").innerHTML = jsonData.reportSummary.messagesReceived;
        document.getElementById("eventsProcessed").innerHTML = jsonData.reportSummary.eventsProcessed;
        document.getElementById("averageEventsPerSecond").innerHTML = jsonData.reportSummary.averageEventsPerSecond;
    }
}
httpRequest.open("GET", dataFile, true);
httpRequest.send();
}

Keep in mind, using JavaScript alone won't suffice for loading files since it operates on the client's end.

Answer 2

Look no further for the solution to that issue:

function loadDataIntoTable(file) {

var dataFile = file;
var httpRequest = new XMLHttpRequest();
try {
    httpRequest = new XMLHttpRequest();
} catch (error) {
    try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (error) {
        try {
            httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (error) {
            alert("Oops, looks like your browser is having issues!");
            return false;
        }
    }
}
httpRequest.onreadystatechange = function () {
    if (httpRequest.readyState == 4) {
        var jsonData = JSON.parse(httpRequest.responseText);

        document.getElementById("messagesReceived").innerHTML = jsonData.reportSummary.messagesReceived;
        document.getElementById("eventsProcessed").innerHTML = jsonData.reportSummary.eventsProcessed;
        document.getElementById("averageEventsPerSecond").innerHTML = jsonData.reportSummary.averageEventsPerSecond;
    }
}
httpRequest.open("GET", dataFile, true);
httpRequest.send();
}

Keep in mind, using JavaScript alone won't suffice for loading files since it operates on the client's end.

Populating a table with information retrieved from a file stored on the local server

Answer №1

Similar questions

The 'data' variable is not defined in the React custom hook Pagination

What is the best way to ensure a DOM element exists before you can start manipulating it?

Creating a structure within a stencil web component

Using Rails: How to invoke a function in the asset pipeline from a JS response?

What causes the lack of impact on lambda rendering speed despite integrating webpack?

Problem with Ionic 2 local storage: struggling to store retrieved value in a variable

What is the method to retrieve a randomly generated class from an id?

Protractor and Jasmine fail to fulfill the promise of retrieving a webpage title

Enhancing parent component props in React-router-dom: A guide to updating them

Utilizing Slim PHP to generate JSON responses

Clones are made sortable instead of arranging them in a specific order

Ways to switch text on and off smoothly using transitions

Which library do you typically employ for converting .mov files to mp4 format within a React application using Typescript?

The CORS middleware seems to be ineffective when used in the context of Node.js

Using PHP and JSON to successfully store JSON data in a MySQL database

Is it appropriate to use a component inside an entry component?

Is Webpack CLI causing issues when trying to run it on a .ts file without giving any error

The imported package is not functioning properly within the project

Having trouble with the menu toggle button on Bootstrap 4?

I'm experiencing an issue with Gravity Forms validating hidden fields, is there a solution for this problem?