Learning How to Fetch, Manipulate the DOM and Update a Form Using JavaScript
In the following article, I will describe how to use the fetch API to get all elements from an internal database server, use PATCH to edit those elements and manipulate the DOM using JavaScript. I’ll primarily use visual examples from a Flatiron School Toy Tale mini project in the form of code snippets to more clearly demonstrate these concepts.
All of the toys for the project are stored in a file called db.json. There is a separate html file , index.html, with id and class names provided for easier DOM manipulation through JavaScript. We’ll code our JavaScript in the index.js file within our src folder.
After changing the directory (cd command in the terminal) into the project’s folder, we should install the json-server by typing the following in the terminal:
npm install -g json-server (if you don’t already have the JSON server installed) and then:json-server --watch db.json (this provides us with a full fake REST API)
After performing the above step, our project requires the following remaining deliverables:
1.) Fetch Andy’s Toys!
2.) Add toy info to the card!
3.) Add a new toy!
4.)Increase toy’s likes!
For a full version of the project visit Learn.co on github at the following:
The following HTML skeleton was provided for DOM manipulation:
The main URL from which to fetch all toys is http://localhost:3000/toys. To make it easier to use in our fetch request, it’s being assigned to a constant variable called toyUrl. We can select the new-toy-btn id using the HTML DOM querySelector. Notice that querySelector id’s are selected using a hash symbol (#), while classes are selected using a dot (.). The entire toy-collection div is found by using the getElementById method. Pay attention to the difference in how DOM elements are captured by the querySelector and getElementById methods.
The below starter code from lines 4 through 13 is adding an event listener to the “Add New Toy!” button by assigning the style.display property to either ‘block’ or ‘none.’ The toys are being appended to the page by adding a template literal to the innerHTML of the toyCollectionDiv. Of special importance is the data-, which is called a data attribute. It is used to interpolate the id of each toy and will later be used to associate the like button with its appropriate toy.
The first fetch grabs all of the toys through the toyUrl, which was declared at the top of the app. Following the initial fetch, we write another fetch in the form of a ‘POST’ in order to add a toy through the form submission. The values that get passed through the body of the post are the name, image and likes associated with a new toy. Notice that an event listener is placed on the addToyForm, which is listening for the submit button.
The fetch with the ‘POST’ method is what updates the internal server with a new toy based on the information provided to us in the form. Through the JSON body, we are passing the name, image, and likes associated with a new toy. In the last .then method of our fetch, we call the putToysOnPage function, which was written above on line 19.
We then add an event listener to pay attention to the user’s clicks on our like button. Then we use DOM selectors to increase the like count by altering the innerText of the <p> tag which displays our number of likes. See below how the event can be tracked to find the correct element on which to increment our likeCount:
Finally, we make another fetch with a method of ‘PATCH’ to update a toy’s likes with the appropriate count based on the clicks of the user.
Congrats! We met our deliverables and completed our project!
Sources:
