0

First of all, I will state the obvious: I suck at html. My javascript coding is on par, but I am just now discovering the severe limitations of js inside html.

Case: my node.js applications output an errorlog to json. I have made a dynamic html table to sort and display those errors, all of that is working very well.

However, when I have dealt with those errors, I would like to have a button on said html page to overwrite the json file with [], effectively making it blank again.

Now, in node.js this is easy peasy with fs, but no such thing inside html. To read the json I resort to XMLhttprequest.

I'm pretty sure the answer will be that I can not change data on the server from client-side. That would make sense, but are there workarounds?

<script>
    Parser();
    setInterval(function(){Parser()}, 300 * 1000)

    function Parser() {
        getJSON("Errors.json", function(err, data) {
            let array           = data;
            let titles          = ["Time", "Program", "", "Count", "Info", "Error"];
            let text            = [];
            let joined          = [];

            let table           = document.createElement("table");
            let tr              = table.insertRow(-1);
            for (let i in titles) {
                let th          = document.createElement("th");
                    th.innerHTML = titles[i];
                    tr.appendChild(th);
            }

            for (let i in array) {
                let count = 0;
                array[i].count = 1;
                for (let x in joined) {
                    let ar = array[i], jn = joined[x];
                    if (ar.file == jn.file && ar.line == jn.line && ar.info == jn.info && ar.message == jn.message){
                        count++;
                        jn.count++;
                    }
                }
                if (count == 0) joined.push(array[i])
            }
            for (let i in joined) {
                let tx          = joined[i]
                    text[0]     = tx.time;
                    text[1]     = tx.file;
                    text[2]     = tx.line;
                    text[3]     = "("+tx.count+"x)";
                    text[4]     = tx.info;
                    text[5]     = tx.message;

                tr = table.insertRow(-1);
                for (let j in text) {
                    let tabCell = tr.insertCell(-1);
                        tabCell.innerHTML = text[j];
                }
            }

            let Table = document.getElementById("table");
                Table.innerHTML = "";
                Table.appendChild(table);
        });
    };

    function getJSON(url, callback) {
        let xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.responseType = "json";
        xhr.onload = function() {
          let status = xhr.status;
          if (status === 200) {
            callback(null, xhr.response);
          } else {
            callback(status, xhr.response);
          }
        };
        xhr.send();
    };
</script>
1
  • HTML is purely descriptive. It effectively does nothing, the browser takes the HTML and renders the document based on it. It is the browser that does all the work, that is where javascript comes in. Commented Feb 22, 2018 at 4:50

1 Answer 1

1

The code sample that you posted is irrelevant to your actual question which you seem to have answer yourself. You don't have access to the filesystem from the browser.

However, you can make the button send an AJAX request to the backend server to clear the JSON file for you.

Sign up to request clarification or add additional context in comments.

2 Comments

Is there any "for dummies" tutorial which could get me started? My back-end is just a nodjes app running on server, which spits out errors to a json file. no ajax or what-have-you involved...
Your getJSON() sends an ajax request. So you can have something like this getJSON('/clear/log/file', ...). Just make sure to handle the route for /clear/log/file in your backend to perform the action that you want to do.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.