I did not feel like writing my blog post yesterday but I did code! I made a POST and Patch request using FETCH. How did I do it? Well, I followed the lab provided by my bootcamp.
First I made a GET request to get all of the items in my database and append them to the page:
function getAllToys(){
return fetch("http://localhost:3000/toys")
.then(function(response) {
return response.json();
})
.then(function(object) {
// console.log(object);
const characters = object
characters.forEach(character =>{
const collection = document.querySelector('#toy-collection')
// console.log(character)
let div = document.createElement('div');
div.className = "card"
div.innerHTML = `<h2>${character.name}</h2><br>
<img src=${character.image} class="toy-avatar" /><br><p>Likes: ${character.likes}</p><button class="like-btn">Like <3</button><br>`
// console.log(collection, "this is collection")
collection.appendChild(div)
// div.append(object.name)
})
// document.body.innerHTML = object.id
like()
})
I called the getAllToys() function when the DOMContentLoaded:
document.addEventListener("DOMContentLoaded", () => {
getAllToys();
}
Then I wanted to be able to add to my database so I created form and added an event listener to the form that would use the input given in the form and use it in a function that I named submitData.
const form = document.querySelector("form.add-toy-form");
form.addEventListener("submit", (e) => {
event.preventDefault()
let input = document.querySelector('input.input-text')
let image = document.querySelector('input.input-text-image')
submitData(input.value, image.value)
});
The submitData function takes two arguments, which is the name and image that the user inputted into the form. Then I created a variable named configObj for the post request that must be passed into the fetch request.
function submitData(name, image){
let formData = {
name: name,
image: image,
};
let configObj = {
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
},
body: JSON.stringify(formData)
};
return fetch("http://localhost:3000/toys", configObj)
.then(function(response) {
return response.json();
})
.then(function(object) {
console.log(object);
getAllToys(object)
})
.catch(function(error) {
console.log(error.message);
});
}
Then I made the post request and if there are any errors, I console.log the error message.
For a better understanding on making POST request using fetch, feel free to checkout this youtube video:
As always, thanks for reading!
Sincerely,
Brittany
Top comments (0)