Type in “npm start” in the terminal, which will point to localhost:3000.
(*NOTE* if that doesn’t work, do an “npm install”)5.
For this particular project, I would like to only read the data from our .
json file and just display it in that format, so we won’t need the views folder at all.
As I already have Express installed I just typed in my terminal the below.
This allowed my to create a new folder “myapp” with no views.
Cool, now you should see the whole express application in your code editor, as below.
Express generator folder structureThat was it for step 1!.We’re on our way ….
Creating our data folder with the JSON fileGo to my app and create a new folder called “data”.
Inside that folder create a new file with the .
I have absolutely 0 inspiration so have named mine “gymnasts.
You can name it anything you want as long as it as a .
json at the end.
For example “kittens.
json” (because everyone loves kittens).
This will allow us to read use FS and read from the file.
In my case, the file contains a few gymnasts in an array of objects.
View of my gymnasts.
json fileNow we have the .
json file and our data in, the hard work begins.
Let’s go in the routes folder and create a new route.
Clicking on the “routes” and create a new .
In my case, I will try and display all the gymnasts from my .
json folder so I will just call it: gymnasts.
Let’s go back to our app.
In there we need to:Create a new routeCreate a new router which will direct to our new route (which we created above).
Structure of app.
js fileThat was it!Now, final step:3.
Reading and displaying data from the JSON file on our localhost using FS.
Simply copy the layout from the other routes (index.
js / users.
js) (this is what I mean when I say developers are lazy…again).
In addition to that we will need to require “fs “(which is File System — this is what helps us read our file, you can find out more here ) and “path” which will help us get the absolute path to our .
Top of the file for our new routeLet’s start writing our GET request! :)The main thing to remember with all API requests is that they will always follow the same format (more or less) and will be look pretty similar!.Cool, right?.This means that once we find out how to write one GET request, we can do DELETE, CREATE, UPDATE and so on much easier.
Our GET requestSo…what is going on there?Let’s break it down line by line:The router.
get is a function, which takes in a callback normally with 2 or 3 parameters, request, response and next.
The “/” is basically the route where our users will go to.
Since we are getting all our data (gymnasts in our case) why are we not pointing towards “/gymnasts” I hear you ask?.Well, this took me a long time to get my head around it, but basically we are already pointing towards the “gymnasts” route in app.
If we included “gymnasts” after the “/” in order to get all the gymnasts, our users will have to go to “/gymnasts/gymnasts”.
Try it out in your code and you’ll see the difference!fs.
json”) this is where fs starts doing its magic!.fs.
readFile is a function which takes in 2 parameters (the first paramater is the path, and the second our callback function).
First, we are telling it to go to the main path and join it with our .
json file (in my case, gymnasts).
One thing to note, is that you will need to point to your exact file location.
The next bit is actually how we will display the data.
The callback function takes in 2 arguments: (err, data) where data is the actual contents of the file.
In my case, I renamed this to “gymnastsData” just so I know what I will be displaying.
You can name this anything!Over the next line, I’m just doing a bit of error handling, which can be improved upon…(The School of Code boss will probably shake his head at this point).
The last line is where we “send” the response (aka what our user will see).
This is what res.
We are simply telling our GET request to parse the .
json data and display the data in the .
json file (which I called “gymnastsData”) above.
That’s it! 🙂 you can see the results below on Postman, or using your local host.
Some extra points…Don’t forget to start/restart your sever! Type in the terminal “npm start”You can find the code for all of the above on the official fs documentantion here.
Useful info on Stack Overflow.
That’s it! :)The next step in this series will be on how to create a local MongoDB and read data from that, using Mongoose.