The DELETE Method

This is basically a follow up of my last blog post: https://evanrpavone.github.io/the_struggle_was_real

I was a mess then, was nearly about to be that same mess this go around, but I finally figured out what my issues were!

The Issues

• My backend destroy method and routes were not setup properly
• In the frontend the card that was created that included the remove button wasn't getting recognized when adding an Event Listener.
• The I.D attribute wasn't suppose to be used.

The Fixes

The Back-end

Let's start out with my back-end in my rails api. My destroy method and my routes were not setup properly. I had to make a destroy method that grabbed all of my breweries and then I used the destroy_all method to delete all of the data inside the breweries api. I had to do the same thing to my other model which was favorites.

destroy method

 def destroy breweries = Brewery.all if breweries.destroy_all render json: { message: 'Breweries deleted' } else render json: { errors: breweries.errors.full_messages } end end 

routes

For the routes. I had to add the delete HTTP Method to each model route

delete '/breweries' => 'breweries#destroy' delete '/favorites' => 'favorites#destroy' 

The Front-end

Now, for the front-end, my skills aren't that great when it comes to JavaScript. I spent a very long time figuring out what the issue was even though it was right in front of me.

Binding the Event Listener to the Delete Button

Originally, I had the delete button be rendered inside the brewery card when it was created. The Event Listener didn't recognize it, so what I did was add a clear all breweries button to the html file and bind the event listener to that button instead. I probably could have made it work inside the card now that I think about it, but for right now I am going to leave it where it is. After I got the event listener working, I had to get the delete method to work. This wasn't that hard. All I had to do is make a removeBreweries class method that called a removeBreweryCard method and a removeBreweryFromApi method (I probably didn't need to add this). This class method also had to call the removeFavorites Method to delete the favorites from the api as well.

 removeBreweries() { fetch(this.baseURL, { method: "DELETE", headers: { "Content-Type": "application/json", "Accept": "application/json" }, }) this.removeBreweryCards(); this.deleteBreweryFromApi(); this.removeFavorites(); } removeBreweryCards() { const allCards = document.querySelector(" #brewery-card-container"); allCards.innerHTML = ""; } deleteBreweryFromApi() { return fetch(this.baseURL) .then(resp => resp.json()) .catch(error => console.log("Error: " + error)); } removeFavorites() { console.log("Hello") fetch(this.favoritesURL, { method: "DELETE", headers: { "Content-Type": "application/json", "Accept": "application/json" }, }) console.log("removing favorites"); this.removeFavoritesFromApi(); console.log("Removing All Favorites Now"); } 

This all worked out exactly as planned, I didn't have to do much else to the delete button after adding these.

Un-used attribute

So after looking at my code trying to figure out why the favorites wasn't being iterated properly for many hours, I realized that the id attribute wasn't being used at all. Basically, when I submitted a new brewery it was pushing everything by the name of the brewery, which is exactly what I wanted. What I didn't realize for a while is that I had ID as part of my constructor and not in my POST method. It was pushing the form data into an array like so:

this.breweries = [] this.breweries.push(new Brewery(brewery.attributes.id, brewery.attributes.name, brewery.attributes.city, brewery.attributes.state, beers)) const brewery = new Brewery(form[0].value, form[1].value, form[2].value, form[3].value) // form[0].value was coming back as id but was suppose to be coming back as name // so it was id: "Brewery Name 1", Name: "City 1", City: "State 1", State: "Favorites" 

All I had to do was remove everywhere I was getting the id and everything worked without any other errors, which was really exciting.

Conclusion

I am starting to get more comfortable with JavaScript, definitely won't be my primary language but I am more comfortable with it. I know how to interact with a backend a little better, understand event listeners, and Object-Oriented JavaScript.