Send data from JS to HTML file and display in a table

JavaScript
1

Hi friends,

Working on a project (one of my first!!!) and hit a little bump. I think there may be multiple ways to do what I am trying to do and wanted to hear some suggestions.

I am working on a UI that will display data from a database (sqlite). It will be displayed in a table that will have search fields to narrow down the data.

I am using Node. I can successfully console.log the data from the db file. I can also send it directly to the browser (without displaying my html page).

Question!
What I would like to do is take the data, send it to my html file where I have the table and then display it. (I think I should first ask, does this approach make sense or should I be going about this a different way?)

I don’t know how to take data from the js file (that was pulled from the db) and send it to the html file. How do I do this? How hard is it to do with straight js code? Should I use a middle wear? Should I do js first, get it working, then use a middle wear to help for a better learning experience?

Thanks for your help group!

2

Hi!
You should be assigning your table in your html file an id and hence, you can access it in your javascript file using the document.getElementById() function. Once you have a reference to your html table you can populate it in your javascript file using the data you have retrieved from your database. :slight_smile:
Hope that helps!

3

I’ve done this using a template engine and router library quite easily on Node. What you do is setup a router that loads your HTML file, passing in some parameter data to the router (which would be your database data from the js file), and through an asynchronous request to that router on your node instance, Node handles rendering that HTML with the data and returns actual HTML elements to your page. Because you’re making the request through AJAX, the page doesn’t load in the browser, node processes the template file with the data, and returns it to your current page.

1 Like
4

Using vanilla JS your could make an asynchronous request to an html file with your table in it and receiving the document tree for that file after parsing it properly (I believe DOMParser is the proper way to do this, requires some learning though), you can traverse and populate with JS. I’m not sure if CORS becomes an issue with this though.

1 Like
5

@sabahat70 I did try this but the document object is something you can only access in the browser. Because I’d be doing this server side with node, there is no document object.

This is something I just read about. If you’d like more details please google it, you’ll find much better explanations than mine.

6

@Emgo-Dev
Thanks for the explanation. The solution I followed was very similar to what you suggested. See here

In your explanation you talk about using ajax. I’m not familiar with it. Can you explain a bit. Does the solution in the link I provided use Ajax?

Again, thanks for your time

7

Oh yes! I missed out the part where you said you were using NodeJS. Yes, with using NodeJS, it is not straightforward. Emgo-Dev has provided an excellent solution. You can also check out Webpack and the HtmlWebpackPlugin to achieve your purpose. I remember using these in one of my NodeJS projects and it worked.

8

I’m glad you have your solution!

No the linked solution does not use AJAX, it utilizes Node & the express library to fetch a remote local file and pre-render that file while binding POSTed data to the markup. The file is written in a markup pattern ejs that a template engine module in Node understands allowing you to bind data directly to the markup. This is known as templating; There are JavaScript libraries that existed (mustache, handlebars) allowing you to do this in regular HTML markup using attributes, but that practice seems to have decayed away and has joined the Node ecosystem.

In reality this is possible outside Node as well in languages rendered on the server before being sent to the client which if you know PHP (I do) is similar. A PHP file pre-renders, and you can bind POSTed data, or data sent through the HTTP query string to the markup.

Aside from pre-rendering, our next best-solution is to load the HTML itself. Naturally JS has no access to the file-system, yet with the XMLHttpRequest object (AJAX - Asynchronous JavaScript & XML) we can define a URI to query, initiate the query, and define a callback to be called at any given request response (there are four with associated id’s if I’m not mistaken from 0-4). The HTML file itself should be empty, acting as a skeleton or template. JavaScript can do this while the page is already loaded using AJAX (Asynchronous Javascript & XML).

If you loaded an HTML file you might get an HTML string of that files contents. You can parse that string into it’s own DOM. DOMParser was the best way to do this last time I researched myself for my own purposes. This allows you to traverse the files node tree and bind the data yourself. You could add your id’s through the file to make this easier, though if you know the the structure this might not be necessary.

You might consider giving the markup in these files id’s similar to the identifiers you would be passing to them in the template file yourself such as ‘#title’ or ‘#content’. Better yet, you should be using Data Attributes. A data attribute is a fancy term for a general attribute naming convention that allows developers to bind their own data to HTML markup. Rather than searching for ID’s in the DOM, you query these attributes:

<div id="title'></div>

A data attribute name pattern uses data as a prefix for your custom attribute name (data-attribute="value").

<div data-section="title"></div>

And so you can query your markup like so:

document.querySelector('[data-section="title"]');
9

How to actually set up and use AJAX, I don’t feel equipped to explain as I don’t ever fully remember myself. Many developers suggest you leverage jQuery’s $.ajax() method, but there are vanilla methods available that you might find on some articles online. An AJAX request involves defining the URL/URI you wish to query, initiating the query, and defining a callback when that request is made and a response is received. AJAX offers more nuance as you can define some other callbacks when the request fails, at any point along the process. I believe there are 4 types of responses with id’s associated with each one.

I suggest doing some research online, and a fair place to begin is Mozilla’s MDN articles.