Ticket Tool: Using Javascript for Fetch Requests
One of the core components of Flatiron School’s Software Engineering Bootcamp Program, are the projects that book end each phase. These projects are meant to provide an opportunity for students to showcase the creativity, skills, and abilities they have developed in the weeks leading up to that point. For many, especially those who have little to no prior experience with programming, the process of choosing the focus of the project can be anxiety inducing. From my personal experience, I have found the best way to come up with project ideas is to think about two things; what I am personally interested in outside of the classroom and barriers to success that I am currently experiencing.
Fortunately, I was able to lean on both of these concepts for my project in Phase 1. As a new resident of New York City, I have yet to take advantage of everything my new home has to offer and have found myself unaware of most events taking place here. My solution; build an application that provides a filterable and interactive lists of local events. The result:
I had a lot of fun knowing that I was creating something that I would use outside of the classroom and beyond the completion of the course. This helped push me to find more and better solutions to any issues that arose during its creation. This was especially important during the handling of the URL that was used to fetch information on the page.
This project was completed entirely in Javascript and I used the Ticketmaster Discovery API to fetch information on events happening in New York City. To do so, I had to perform a simple fetch request to their Root URL along with my unique API key.
Without any additional parameters, this will return a list of every event in Ticketmaster’s database. To change the results, I would need to write additional search parameters, such as event location or category, directly into the URL. For example, the URL below is a request for music events happening in Los Angeles.
For my application, I wanted to access events only in New York City and be able to filter them by category, keyword, start date, or end date on demand. To do so, I would have to alter the Root URL for every search. However, I wanted to automate this process instead of manually writing out the unique URL for every request. This could be done by including forms and interactive inputs into the program’s interface and then handling the five different factors, including the number of results displayed on the page. While initially a daunting challenge, I was able to accomplish this by breaking it up into smaller individual tasks that I knew I was capable of.
I needed a way to request desired search parameters from my users, store them, and then convert those items into a format that worked with the URL to provide the results they wanted to see. I’ll provide a walkthrough on how I completed this for the first parameter; keywords. This would be similar to a common search bar that would return events based on their relevance to the given keywords.
The first step was simple; create a HTML text input form.
The form element provides a way for users to submit information to the program while the input element’s type attribute determines what format they can do this in. The text type creates a bar where anything can be typed while the submit type creates a button that when clicked, captures the input information and provides it to the program behind the scenes.
Next, I needed to store whatever input information was submitted. I did this in my javascript code by identifying the form element by its unique id attribute and applying an event listener for submission events. This means that whenever a submission event occurs on that specific form element, the program will acknowledge this and automatically run the provided function.
In this case, I wanted to retrieve and store the submitted text value, which again was done by identifying the text input element by its id attribute. You can access information provided to input elements by calling their value attributes.
Additional Note: The default action on submission events refreshes the webpage and removes any new changes. The line event.preventDefault(); stops this from happening and allows us to retrieve any information given to the form without losing any progress.
After this, I needed to convert the keyword value, which I stored in a variable called searchKeyWords, into a format that complies with the Ticketmaster Discovery API Root URL and then add it to the URL we are searching with. In this instance, this is done simply by providing the right tag, ‘&keyword=’ before the keyword.
I decided to create a function, selectKeyWords(), that when provided a URL, would return another URL that could give event results that are relevant to searchKeyWords. However, I also needed to account for the circumstance if no input is provided by the user. To ensure that nothing would go wrong, I altered the selectKeyWords function by adding an if else clause.
This made sure that if no text input was given, the URL would not change. The final step was adding this function to my event listener and using it alongside my fetch request function. Upon submission of the input form, a new URL would be created and then used to provide new results to the screen relevant to the desired keywords.
With one input completed, I could apply the same logic to the remaining inputs. To keep my javascript clean and legible, I created similar but individual functions to handle each input and then used them in a single function, createURL(). When createURL() is run, each function consecutively alters and returns the Root URL into a format that should ultimately provide the users desired results with all parameters considered.
The createURL() function and its inner functions, solved my issue of needing to create unique URLs to fetch specific results on demand. It allows the user to filter for events based on their keywords, category, start or end date, and how many results they would like to see displayed on the screen, all by interacting with the inputs directly on the screen.
This process of adding different parameters to a root URL is how the Ticketmaster Discovery API works in addition to many others as well. Not only was this exercise fulfilling because I accomplished something that I could and will benefit from in my personal life, I found it to be excellent practice for future projects as well. I look forward to sharing my work in those areas and my journey to create meaningful software that solves real problems like the one I experienced here.
Feel free to check out my GitHub profile if you’d like to see any other code I’ve written.
All event related information was provided by Ticketmaster. You can learn more about the Ticketmaster Discovery API here.
If you enjoyed reading this walkthrough on how I automated the process of creating unique URLs for fetch requests, please share and subscribe for more content in the future.
Have any questions? Leave a comment! If I don’t get back to you quickly, its because I’m at an event found on Ticket Tool 😎.
