Last Updated on June 29, 2024 by E. Scott
This OMDB API is an example of a data driven UI. One in which takes a rudimentary payload and uses the data to populate the UI. The documentation worked for me when I built this. Shocking, as in my experience…documentation is usually out of date. Resulting in the need to search for answers.
When you’re stuck, how do you find answers to your coding questions? Let me know in the comments below.
I’ve used several AI tools for a variety of projects. Most of which are able to provide the answers I need. The problem with thereof however is that AI generated code can be detected. So, when I do use it, it’s done sparingly. Or simply to put me on the right track. I never copy paste and certainly do not recommend doing so. Tangent! I digress. Onward.
Table of Contents
OMDB API in Action
Before we jump in, check out the Git Repo. Please let me know if you have any questions. Though I’m proud of all the projects I post here on my blog, they certainly become outdated. And of course in the interim, I’m always learning and growing. So, what I thought was great yesterday, may not be so today.
Begin by enter a movie or TV show (must be exact) and watch the results populate the UI. By means of OMDB’s endpoint, we’re fetching data, and populating it accordingly. Though this could no doubt be accomplished in React, Vue, or with vanilla JavaScript, this is an Angular app. If you’re familiar with TypeScript, it should be no problem to convert. Toggle between poster and table layout to get the full scope of the interface.
Running the app, gives you this UI:
Upon entering a few searches and switching to poster view, you’ll see this UI. We could easily provide a default image for results without one. I’ve chosen not to do this.
However, this is the default view. Which is easy to change. There’s a tremendous amount of data that comes through with each request. Clicking on an image shows some of that data.
Switching to table view (default) provides a horizontally sliding table with additional data.
This is fully responsive as well. Data is of course truncated due to size constraints.
All you really need to run this is an API key. Get yours here, then simply plug it into the environments file. Customize it however you see fit.
So, how does this all work?
Developing an app with the OMDB API
We begin with the index.html. This’ll be the starting point regardless of which framework you use. This could very easily be built in vanilla JavaScript or using TypeScript. In my case, there’s also a main.ts file. If you’re just using TypeScript, you’d use a script tag in the html for main.ts.
<app-root> is the main entry point. All the markup is sent to this tag.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Omdb</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Unfortunately I can’t explain every line of code in here. But I can certainly give you the gist of what’s happening.
All of the ngClass attributes apply classes to the elements with a condition. Most of which are contingent upon data. Input fields get a class if there’s data.
The results block gets a new class if there’s data.
If lightbox is true, we trigger the pop up shown above. Notice the click event to close the lightbox.
Notice the movie poster section.
This is the input field. Not too bad, right? #title is a way to select the element. Most UI frameworks have something like this because elements are removed from the DOM. This way, the framework has it’s own method of keeping tabs on everything in the DOM.
There’s a keydown event which fetches the results. Whether it’s the OMDB API or any other one, there’s lots of similarities when building data driven UIs.
Take this one for example. NASA’s API is great too. Compare the two and you’ll find structural similarities.
Open Whether map is another great example. Check out the project right here.
<div class="input-fields" [ngClass]="{ hasData: dataArr.length > 0 }">
<h3 [ngClass]="{ 'title-w-data': dataArr.length > 0 }">
Search Movies & TV Titles
</h3>
<input
#title
class="year"
type="text"
placeholder="Title (enter to search)"
(keydown.enter)="fetchResults()"
/>
<input #year class="title" type="text" placeholder="Year (optional)" />
<button (click)="fetchResults()">search</button>
</div>The TypeScript for this page isn’t too complex. There’s the base URL, the API key, and a data array that holds that payload. At the time I wrote this, RxJS was a big so this utilizes that. RxJS is a way to manipulate data and Angular includes it out of the box.
Thereafter I have the fetching occurring which simply concatenates the base URL, the API key, and the search query. The below examples come straight from the documentation. If you have questions though, ping me in the comments. The OMDB API is no doubt one of the easier APIs I’ve used. And I enjoyed building this too!
this.baseUrl + this.titleQuery + '&y=' + this.yearQuery + this.key
// Variations:
// Return all episodes by using just the "Season" parameter:
http://www.omdbapi.com/?t=Game of Thrones&Season=1
queryOne: string = '?t=Game of Thrones&Season=1';
// Season+Episode search parameters added:
http://www.omdbapi.com/?t=Game of Thrones&Season=1&Episode=1
queryTwo: string = '?t=Game of Thrones&Season=1&Episode=2';As you may have noticed, I have lots of Angular samples here. This is simply because I’ve worked with the framework for over a decade. If you are however looking for a React project, I have a great data table. Angular or React. JavaScript or TypeScript. They’re all amazing technologies. Any who, I really hope you’ve learned something valuable here. Otherwise, if and when you build an OMDB API app, share it here in the comments!
Leave a Reply