Fetch Boi

The concept of Fetch is simple.

1. Get data from an API address
2. Parse the response into JSON
3. From the given data, iterate to manipulate in the backend and frontend and render it on DOM.
4. Just in case, console an error to see on the browser any possible errors

If you just practice fetch a few times, the concept is easier than you think. So why did I struggle so much on something so simple?

FIRST: Flow

After doing Ruby, I was confident that this would be easy. However, I ran into confusion of the flow. What is the order to events?

Scenario

1. The browser listens for an event
2. Call a function to listen for a click
3. Manipulate to either CRUD or display on the browser
4. fetch!

What did I struggle with? All the functions leading up to fetch.

SECOND: functions

When you create variables to find an ID or create an element. The most confusing thing is trying to figure out when to put the variable inside the callfunction.

For example:

const li = document.getElementById(`image-${this.id}`)
const ul = document.createElement(`ul`)
this.vocabularies.forEach(v => ul.innerHTML += v.render())
li.append(ul)

Yes it's obvious now that I include 'ul' in "append" but for some reason it took a while for me to figure out that I wanted to put in new bullet points and not new "li".

THIRD: JS Objects

static handleSubmit(event){
event.preventDefault()
const input = event.target
let obj = [...input.elements]
let args = {image: {}}
args.image.category = obj[0].value
args.image.url = obj[1].value
fetchAll.createImage(args)
}

This code right above is showing how to transform your input into an object, then call on the values for when you fetch. For the variable "args", I needed "image" as a key because the fetch wouldn't not work otherwise. In order to create a new Image, I would need the object to have the key "image" recognized, THEN I can add input for the columns for the Image model.

FOURTH: Show up on the Page!

When creating the delete image functions/fetch, it was difficult to figure how to get the browser to also delete the image without need to refresh the page.

The problem?
For fetch, I put li.remove(). So wouldn't it "remove" the picture from the page? Apparently not. I needed to put this code again in my function for handling the delete. The very function that would find the "delete" button and call the fetch function.

Solution

static handleDelete(e){
const li = e.target.parentElement
if (e.target.dataset.action === 'delete'){
fetchAll.deleteImage(li)
li.remove()
}

So here it is. A simple fetch that is easy to learn but difficult to implement on a single-page. I probably struggled since it was my first time trying JavaScript but all these roundabout problems taught me that I really need to work on logic flow. If I thought about each step slowly, perhaps I wouldn't have struggled with fetch as much as I did. But now I know and despite hours/days of struggle, I'm still excited to continue using JavaScript. For me, I feel like these problems are evolving me. Hope it does the same for you guys.