Skip to main content
Noble Desktop/3 min read

Sortable Movies in JavaScript

Build a Sortable List

1

Store Data as an Array

Each movie is an object: { title, year, rating }.

2

Sort with a Comparator

arr.sort((a, b) => a.year - b.year) — number sort by year.

3

Render to the DOM

Map sorted array to <li> elements and inject into a <ul>.

4

Add Sort Buttons

Click handlers re-sort by different keys, then re-render.

Master Full Stack Development at Noble Desktop

Noble Desktop's Full-Stack Web Development Certificate covers HTML, CSS, JavaScript, and the modern web stack.

In this video, we're going to look at how to build a movie database display.

Video Transcription

Hi, my name is Brian McLain. I'm an instructor of JavaScript and Python programming at Noble Desktop in New York City.

In this video and in the ensuing couple of videos, we're going to look at how to build a movie database display. So I have a set of movies, and we want to load them up into the browser and have them sortable. Here they come in alphabetized by name, but we can also sort them by duration and by year.

In this first video, we just want to add a new property to our array of movies so that we don't have to display the total raw number of minutes. If you look over at IMDb, here's Black Panther at 2h14m—that's the format we want. We don't want it to say 134 minutes. That's because our dataset has an array of objects and there's a property called mins where we're drawing that information from. We also have name and year.

So the first thing we want to do is implement that fix. We're going to set up a loop through the movies array. We're going to say, let I equal zero. I is less than movies.length, I plus. Every time through, we want to grab the movie's mins property.

So I'm going to say let mins equal movies[i].mins. Then, we're going to get the hours out of that by dividing mins by 60 and rounding that down. We'll say let hours equal mins divided by 60 and to round all that down, we'll wrap it in Math.floor which returns the takes whatever's in the parentheses and rounds it down.

Then, we're going to use the modulus operator which goes between two numbers and returns the remainder of the first divided by the second to get the remainder of minutes. We'll say let remainder minutes equal mins mod 60. So, in the case of Black Panther, that'll give you a 14. Then we're going to add a new key to our movies object. We're going to say, movie[i].ourMin = `${hours}h ${remainderMin}m`. That should do it.

So this is on a loop, right? So every time to the loop, we'll get a new property called ourMin. So let's log all that array of objects to the console to see if we do have that new ourMin property. Come over to the console, we have an array and there it is—there's a new property. Whoa, and we have a bug because I put the dollar sign inside the parentheses instead of outside, so we'll fix that real quick. Yep, back, refresh, open and we're all good and Black Panther is now 2h14m.

So stay tuned for the next video where we render everything and then the video after that, we're going to implement the sort. In the meantime, till then, thank you very much. Once again, I'm Brian McLean with Noble Desktop in New York City.