![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktddh6i0wczq2yun08lo.png) I am finishing phase 1 of the Flatiron Software Developer Flex Program. The main focus of my phase 1 project was a page that could be utilized in a barn manager app used by boarding facilities. I have decided to add two separate search bars. First I went into HTML and added 2 forms - I start off with my horse search bar first because I want to know I can fetch the API with the least amount of variables. If I were to try to construct the fetch requests at the same time with a solid knowledge base, I would run into multiple contradicting errors between the two. Running one at a time allows all our focus to be where it needs to be. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tqma7foxsy3p82kb7an.png) Next I go to script.js to construct the GET request and add my event listener to monitor the submit button with the search bar. My event listener will use getElementById() in order to correctly identify which form I want to be transferring data to. In this case it is “horse-form”. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qk1fp8w6dq9moiz5xowq.png) I have labeled it as form1 as I know I will be using a second form and I name my function that will house my GET request with the action it will be tasked with. The searchHorse function I thought would be easy but I ran into my first set of issues relatively quick. This function allows for the user to search through the JSON data. When using fetch in this manner fetch(`http://localhost:3000/horses?name=${searchHorseValue}` Remember to use backticks as opposed to commas or quotations, the backticks allow for a ${search} to be used. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1jk21ge8pl8yyvmmx4k.png) Once the fetch method finds the data, we need to display it on the frontend. This begins in the GET request but is in a separate function. Our GET request has our searchHorse function end with the function “displaySingleHorse”. displaySingleHorse is a small function that grabs the correct form for the info to load into, and grabs the info for what has been searched. It is simple yet one seemingly minor mistake will have you chasing invisible errors in your code. This is why it is ideal to finish one search bar at a time as opposed to trying to complete both at once ( which I have tried to save time, not a good idea). ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5nuzy7gjddfzzlhjusg3.png) function displaySingleHorse(horseData) { const singleHorse = document.getElementById("horse-results"); singleHorse.innerHTML = `

Name: ${horseData.name}

Breed: ${horseData.breed}

Color: ${horseData.color}

Awards: ${horseData.awards}` } One error I had trouble fixing with being new to GET requests was displaying an image when the GET request is carried out. As you can see in the function above, I put the ${horseData.URL} in tags. This was the root of some frustration due to not receiving an error when trying to use the search bar. It displayed all the correct data except for the image. After lots of googling and reading through Stackoverflow, I was able to remedy the mistake. You would think the pictures were displaying with no problem now right? Wrong, It was showing the URL data but not as an image, it was showing a small image that I am unable to describe but it looked like a picture that was trying to load but was unable to. This next mistake was more of a process to find the correct way to add the photos. I originally saved them to my google drive and copied the link and added that to the db.json. Unfortunately this was before the

abrilchandler

My experience learning to use fetch API with a search function

Join Our Newsletter. No Spam, Only the good stuff.