Creating Nested Lists with JSON-Server
For my Flatiron Phase 1 Project, I created a one-page movie search engine/ list creator. For the most part, things went very smoothly. It wasn’t a complicated app by any stretch of the term, and I had all but one of my desired features up and running when I ran into the Big Issue™.
I wanted to be able to add any movie returned from the database to one of a group of user-defined lists. To reach this end, I used json-server and a single JSON file to store all the information about both the user’s lists, and the movies stored within, using the following structure:
On the surface, this structure seems logical. All I needed to keep in my local database was a list of lists. Each list object contained some unique information about itself, as well as the actual list of movies. This allowed me to display each list by name, and display the contents of a list on demand. However, issues arose when trying to add more movies to a list.
Now, before diving into my specific problem, a little on how json-server creates a “server”. When fed a JSON file, json-server will create endpoints corresponding to the top-level keys of your JSON. In the example above, the only endpoint was ‘http://localhost:[port]/lists’. For this key, you are able to send GET and POST requests to’… /lists., and PATCH and DELETE requests to ‘…/lists/:id’.
With these default endpoints, adding movies to each list using a POST to ‘…/lists/:id/movies’ returned error 404, despite the desired resource being accessible with a PATCH request. However, using PATCH simply replaced already existing information in the file, and sending the POST to ’…/ lists’ threw the entire data structure into chaos. What to do?
To make this work, I needed to do two things. First was to restructure my JSON so that lists were stored separate from movies, resulting in 2 top-level keys, ‘lists’ and ‘movies’. And the second was to create a custom route for my json-server in a separate JSON file.
The key in this object represents the URL I want to POST to, and the value represents the URL json-server will automatically redirect that request to. But how will the big list of movies be sorted?
Just like json-server will automatically adds unique ids to objecst you POST directly, when posting to custom URLs in this fashion, json-server adds a key-value pair indicating which list a movie is related to, in this case ‘listID’. This is called a foreign key, and makes sorting a breeze. When sending a GET request to ‘…/lists/:listID/movies’ for instance, json-server will automatically redirect the request to the top-level key ‘…/movies’. It will then read through the whole list, looking for movie objects that have the same listID value as the requested list’s id, and return only those.
So from there, all I had to do to send my new movie to any list in the database was to send it as a POST request to ‘…/lists/:id/movies’, and the server would take care of sorting it itself.
