Moving javascript file to external reference in Node.JS called HTML

Question

I have some javascript ajax code in my html page that I host on a Node.JS server.

I would like to move it to a specific side .js file to be able to debug but can't figure out how. The solutions here doesn't work.

It seems due to scope but not sure how to solve it.

<script>
  $(document).ready(function() {
    $('#mainTable').DataTable( {
        "ajax": "jsonData",
        "columns": [
            { "data": "level" },
            { "data": "value" },
            { "data": "description" }
        ]
    } );
  } );
</script>

EDIT

Reason for doing so:

1. Wishing to have a clean split bet. script and html
2. Being able to debug the scripting part (seems not possible in Visual Studio Code for the part that is in the html file)
3. Solve some import issue that doesn't seem to work in the html script section

For #3, see below as an example, the require doesn't work although path is correct:

<script>
    window.onload = function() {
    var a = document.getElementById("books");
    a.onclick = function() {
        var utils = require('./../controllers/utils.js');
        var filteredData = utils.filterJsonData(table, "HighLevel");
    }
</script>

Thank you in advance

Answer 1

In your html page add the following.

<script src="./somename.js"></script>
<script src="./../controllers/utils.js"></script>

In your somename.js

$(document).ready(function(){
  $('#mainTable').DataTable({
      "ajax": "jsonData",
      "columns": [
        { "data": "level" },
        { "data": "value" },
        { "data": "description" }
      ]
  });
  $('a#books').click(function(){
    //Where is table coming from?
    var filteredData = utils.filterJsonData(table, 'HighLevel');
  });
});

As for being easier to debug between a separate js vs in a single html page, it should not matter. It should be the same effort to debug in the browser.

require works only in nodejs which can be used in server side js code. Are you using some library that provides require in browsers?

Answer 2

Move the code that is currently inside of your script tag to a separate file, say side.js :

  $(document).ready(function() {
    $('#mainTable').DataTable( {
        "ajax": "jsonData",
        "columns": [
            { "data": "level" },
            { "data": "value" },
            { "data": "description" }
        ]
    } );
  } );

Change the script tag to be

<script source="./side.js"></script>

It looks from some of your other code ( require... ) that you are attempting to execute Node.js inside of the HTML. Node.js is executed on the server side; all of the Javascript in the HTML will be executed on the client-side (browser).

---

ETA: now that you've updated with the code, I see that, yes, you are attempting to use Node.js inside of the HTML. It won't work - you can't require inside of the user's browser.