Part 3(b) — Search Functionality
In Part 3(a) we created a GET request to query our API. Here, in Part 3(b), we will query data stored locally on our machine and use that data to populate the drop down. For this part we will edit our backend using Express to set up routes and middleware to perform tasks on those routes.
Before we can get started we need to store some data to your local machine. In the assets folder create a folder called data. In this data folder create a file called categories.json. In this file, declare a variable called categories and assign it to an object. This object will be filled with an array of strings. Each string will be its own category. You can copy the list of categories from my repo or use your own.
Now, let’s edit our component in the frontend. In SearchBar.jsx state, declare a key called “topCatArray” and assign it to an empty array. This is where we will store an array of all category options the user can choose from.
Then, declare a function called “getDropDown”. This function will perform a GET request to a path we create, and store the response from that request to state.
In getDropDown, use axios to declare a GET request. Pass a path as a parameter to the request. We’ll name the path ‘/categories’. We will later set up routes for this path in our server file.
Using promises declare a variable to store the response we get back from our request. We’ll call the variable “topCatData”. Then, update state with the value of this new variable.
Because we want to this function to run as soon as the page loads (so the drop down will populate instantly), we will invoke this function using React’s “ComponentWillMount” function.
Now, let’s create a route for the path to ‘/categories’ we made in our “getDropDown” GET request.
In our server.js file declare a route that, for now, responds with a status of 200. You always need to respond to a request. Even if you have no data to respond with you can respond with a status. Look here for all status codes.
Next, we’ll need to create a controller function to help us get the data from our categories.json file. Controllers are middleware (functions) that perform tasks on a route. In this case, the task will be getting the requested data (the list of categories) and returning that data as a response object
Create a folder in the Server folder called “Controllers”. In the Controllers folder, create a file called “categoriesController.js”. In the categoriesController.js file, declare a variable called “categoriesController” that is assigned to an empty object. Each controller we create in this file will be added as a key to this categoriesController object. We will export this entire object.
Create a key called “getCategories”, assign this key to an arrow function with req, res, and next as parameters (representing the request object, response object, and next function respectively).
In this function, destructure the categories object from the categories.json file. Use the “fs.ReadFileSync” method to get data from that file. Be sure to parse the data from that file using the JSON.parse method.
Store the categories response object you get from the categories.json file to res.locals. Then, return next. You can also add a conditional to throw an error if the categories object is empty.
**Note: Res.locals is an object that contains response local variables scoped to the request. It’s values are available only during that request / response cycle.**
**Note: Returning next moves response data from one controller to the next controller (if any) and then back to the route. Without returning next you’ll never leave the controller function.**
Add the controller to the ‘/categories’ route in the server.js file.
Once the data from the categories.json file is saved to res.locals, you can modify the route to respond with that data in addition to the status.
Now our GET request to ‘/categories’ in SearchBar.jsx can be completed. We are now querying data stored locally on our computers!
Next, we can finally render the results our query to the page. Check out Part 3(c) to finish the search functionality. But first, give yourself a round of applause. You’re almost done!
