Sortable Movies in JavaScript

Video Transcription

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

In this video series, we're building a sophisticated movie database display that demonstrates practical data manipulation techniques every developer should master. Our project starts with a dataset of movies that loads into the browser with full sorting capabilities—alphabetically by title, chronologically by release year, and by runtime duration. This type of dynamic data presentation remains essential for modern web applications, from e-commerce platforms to content management systems.

Today's focus addresses a common real-world challenge: transforming raw data into user-friendly formats. Consider how IMDb displays Black Panther's runtime as "2h 14m" rather than "134 minutes." This human-readable format significantly improves user experience, and implementing this transformation teaches us valuable lessons about data processing and object manipulation in JavaScript. Our movie dataset contains an array of objects, each with properties for name, year, and mins—but we need to enhance this structure to better serve our users.

Let's implement this data transformation step by step. We'll iterate through our movies array using a standard for loop: `let i = 0; i < movies.length; i++`. This approach gives us precise control over each iteration, which becomes crucial when modifying object properties in place.

For each movie object, we first extract the total minutes: `let mins = movies[i].mins`. Next, we calculate the hours by dividing the total minutes by 60 and rounding down using `Math.floor()`. This built-in JavaScript method ensures we get whole hours: `let hours = Math.floor(mins / 60)`. The Math.floor function is particularly useful here because it handles edge cases cleanly—a 119-minute movie correctly becomes 1 hour, not 2.

To find the remaining minutes, we employ the modulus operator (%), which returns the remainder after division. The expression `let remainderMin = mins % 60` gives us exactly what we need. For Black Panther's 134 minutes, this calculation yields 14 remaining minutes after accounting for the 2 full hours.

Now we can add our formatted property to each movie object: `movies[i].ourMin = \`${hours}h ${remainderMin}m\``. This template literal syntax creates clean, readable strings while maintaining the familiar IMDb format that users expect. The beauty of this approach is that we're enhancing our data structure without losing the original information—the raw minutes remain available for calculations or alternative displays.

Let's verify our implementation by logging the updated array to the console. As you can see, each movie object now contains our new `ourMin` property. I notice we had a small syntax error initially—placing the dollar sign inside the template literal brackets rather than outside—but that's quickly corrected. These minor bugs are common when working with template literals, and catching them early through console logging is a best practice that saves debugging time later.

With our data transformation complete, Black Panther now displays as "2h 14m"—exactly the professional format we wanted. This technique scales beautifully whether you're working with dozens of movies or thousands of database records.

In our next video, we'll tackle the rendering process, transforming this enhanced data into polished HTML elements. The final video in this series will implement our sorting functionality, demonstrating how proper data structure supports complex user interactions. Until then, I'm Brian McLain with Noble Desktop in New York City—thanks for coding along.