the never-ending hotdog search
Made some progress the other day on my current project! I was finally able to use search results across webpages using query parameters for the first time. It took a while to get right, but when it was finally working, I was pumped.
On the outside, what this looked like was me repeatedly trying to search the word hotdog and being disappointed when nothing came up. When that beautiful hotdog with relish, ketchup, and mustard popped up on my screen, I was both ecstatic and a little hungry. A hotdog sounds like a pretty good way to reward yourself when you’ve made coding progress.
So. The two main things I was trying to connect were the search button (which is present on all of my pages) and the results page, which would display all the results matching the search.
To do this I had to make my search code take the user to the results page with the correct query parameter attached. The query parameter is important because it’s what allows for the transfer of information between the pages. That means I can carry my search term with me when I leave the page I’m on and bring it to the results page. Doing that allows me to grab the corresponding results and display them how I want on my results page.
As a side note: the extent to which I had to go to make this work was only necessary because of the limitations of the database I’m working with. It’s an older database. Ideally I’d be able to filter the database much more simply, but this is what I had access to, so I had to build out my own filtering solution on the front-end.
Then, on the results page, I set up a local array, got all the data from the database, and housed it in the local array. Here I set up my URLSearchParams code, hooking this page up to the search code:
//Boilerplate code to be able to do query paramsconst urlParams = new URLSearchParams(window.location.search);
//.get('search') points to the value of 'search' which is my established parameter in the search code, or the '?search=' at the end of the url.
//It points to that value, so I can grab the exact search term from the search bar value on the previous page.const id = urlParams.get(‘search’);
Then I filtered the array to find only results that match the search term and used a forEach to create the “cards” for each result.
When everything finally came together, it was awesome. I learned how to carry search information across webpages, and that you need query parameters to do that. This part of the project also helped me practice more with using a database and understanding how to interact with it.