Using node variable in js file

Question

So, I understand that in order to turn a JSON file in my root directory into a usable object/variable I have to use Node. Once I parse the JSON file in Node how do I use it in a javascript file? My JSON file contains a list of items. I want to use javascript to create a function that will create an HTML list using information from the JSON file. I can handle the javascript function for making the HTML list. I just can't seem to figure out how to make the JSON file into an object/variable I can access and iterate through in my javascript file.

Answer 1

Let's run through the basics of how this works and then explain your options.

1. User enters a URL into the browser.
2. The browser requests an HTML page from your server.
3. The server sees the request URL and either just sends a pre-made static HTML file in response to that request or it generates a dynamic HTML file containing some generated HTML (usually generated based on some data).
4. The browser receives that HTML and parses it.
5. If there are any resources specified in that HTML file such as <script> tags or <img> tags, then after discovering those tags in the HTML parsing process, the browser gets the href from those tags and then sends a request to the server to fetch those resources.
6. The server gets the request for those resources and sends the appropriate response for each incoming URL that is requested. Again, these may be static resources or they may be dynamically generated.
7. The browser receives those resources and processes them (for a <script> tag, it will run that Javascript, for an <img> tag, it will display the image).

So, you have some JSON on your server and it sounds like you want an HTML presentation of that data to show in the browser when the user requests a specific URL.

There are a couple different ways to do that:

Option #1 - Server-side Template

First (and probably the most common) is you would read the JSON and parse it on your server so now you have it in Javascript object form in your node.js server. You can do this once at server startup and save the result in a Javascript variable in your node.js server or you can do it upon demand in a request handler. Let's say this is now in a variable named myData.

Then, you would combine the data in that Javascript object with an HTML template file and template rendering engine. A template engine is specifically designed to take a template definition and combine it with data to generate HTML. It can do things like turn an array of data into rows of HTML. You create the HTML template using special directives that are defined by the specific template engine you have chosen. Some common HTML template engines for use in node.js are Jade, Handlebars, Pug, Ejs, Nunjucks and so on. Once you have the template designed appropriately and have the template engine registered with your Express server, then you just call res.render() and pass it the template file and your data.

res.render("myTemplate", myData);

This generates HTML from the template plus the data and sends that HTML in response to the incoming HTTP request. The specific template engines each show you more detail on how to construct their templates and how the data gets put into the template. It's different syntax for each template engine, but the same conceptually.

Option #2 - Send Javascript Data, build DOM on the client-side

A second option would be to take your JSON data and insert it into a script file that is part of your web page. Since the JSON text format is a subset of Javascript, it could be inserted directly into a script file and assigned to a variable in that web page. This would give you client-side Javascript access to the data directly and it could then generate whatever HTML it wanted and insert it into the DOM.