How to Build a Top Albums Filter with Fetch API and JavaScript

Introduction: Why Album Filtering Matters in 2026

In June 2026, music streaming apps like Spotify and Apple Music process billions of data points daily. Whether you're building a personal project or tackling CPSC 1520 assignment 2, understanding how to filter and sort data from a REST API is a core skill. This tutorial will guide you through fetching album data, rendering it in a table, and adding search, rating, and sorting functionality—just like the real-world apps you use every day.

Understanding the Task

Your assignment requires you to create a page that loads top albums from a local REST API, displays them, and allows users to filter by search query (album or artist name) and minimum rating. You'll also implement sorting by average rating and number of reviews (bonus). Let's break it down.

What You'll Learn

Fetching data with the Fetch API (async/await)
Rendering data with map()
Filtering arrays case-insensitively
Sorting arrays by numeric properties
Handling form submissions

Step 1: Fetching Albums from the API

First, create a function to retrieve album data from your local server. Use the Fetch API with async/await for clean, readable code. In 2026, async/await is standard in modern JavaScript frameworks like React and Vue.

async function fetchAlbums() {
  const response = await fetch('http://localhost:3000/albums');
  const data = await response.json();
  return data;
}

When the page loads, call this function and assign the result to both topAlbums and topAlbumsFiltered. This ensures your original data is preserved for filtering.

let topAlbums = [];
let topAlbumsFiltered = [];

async function loadAlbums() {
  topAlbums = await fetchAlbums();
  topAlbumsFiltered = [...topAlbums];
  renderAlbums(topAlbumsFiltered);
}

window.addEventListener('load', loadAlbums);

Step 2: Rendering Albums with map()

Use map() to loop through the albums array and generate table rows. This is more efficient than a for loop and aligns with modern JavaScript practices.

function renderAlbums(albums) {
  const tbody = document.querySelector('#album-table tbody');
  tbody.innerHTML = albums.map(album => `
    <tr>
      <td>${album.albumName}</td>
      <td>${album.artistName}</td>
      <td>${album.averageRating}</td>
      <td>${album.numberOfReviews}</td>
      <td>${album.releaseDate}</td>
    </tr>
  `).join('');
}

Notice the join('') to avoid commas between rows. This is a common pitfall for beginners.

Step 3: Filtering by Search Query

Create a function that filters albums by album name or artist name, case-insensitively. Think of it like searching for a song on TikTok—no one cares about capitalization.

function filterBySearch(albums, query) {
  if (!query) return albums;
  const lowerQuery = query.toLowerCase();
  return albums.filter(album =>
    album.albumName.toLowerCase().includes(lowerQuery) ||
    album.artistName.toLowerCase().includes(lowerQuery)
  );
}

Step 4: Filtering by Minimum Rating

Another function filters albums where the average rating is greater than or equal to the user's input. In 2026, rating systems are everywhere—from Uber drivers to ChatGPT plugins.

function filterByRating(albums, minRating) {
  if (!minRating) return albums;
  return albums.filter(album => album.averageRating >= parseFloat(minRating));
}

Step 5: Handling Form Submission

Add an event listener to the form. Prevent default submission, grab input values, apply filters, and re-render. Only call filter functions if the inputs have values.

document.querySelector('#filter-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const searchQuery = document.querySelector('#search').value.trim();
  const minRating = document.querySelector('#rating').value.trim();
  
  let filtered = [...topAlbums];
  if (searchQuery) filtered = filterBySearch(filtered, searchQuery);
  if (minRating) filtered = filterByRating(filtered, minRating);
  
  topAlbumsFiltered = filtered;
  renderAlbums(topAlbumsFiltered);
});

Step 6: Bonus Sorting by Column

For the bonus, make the 'Average Rating' and '# of Reviews' headers clickable to sort descending. In 2026, sorting is crucial for apps like Letterboxd or Goodreads where users want to see top-rated content first.

document.querySelector('#sort-rating').addEventListener('click', function() {
  topAlbumsFiltered.sort((a, b) => b.averageRating - a.averageRating);
  renderAlbums(topAlbumsFiltered);
});

document.querySelector('#sort-reviews').addEventListener('click', function() {
  topAlbumsFiltered.sort((a, b) => b.numberOfReviews - a.numberOfReviews);
  renderAlbums(topAlbumsFiltered);
});

Challenge: Sort by Release Date

If you're feeling adventurous, add sorting by release date. Convert strings to Date objects for accurate comparison.

document.querySelector('#sort-date').addEventListener('click', function() {
  topAlbumsFiltered.sort((a, b) => new Date(b.releaseDate) - new Date(a.releaseDate));
  renderAlbums(topAlbumsFiltered);
});

Common Mistakes to Avoid

Not reassigning topAlbumsFiltered: After fetching, always set both variables.
Forgetting to prevent default form submission: Causes page reload.
Case sensitivity: Always convert to lowercase for search.
Using == instead of ===: Stick to strict equality.

Real-World Application

In 2026, filtering and sorting are everywhere. Whether you're using a job board like LinkedIn filtering by salary, or a music app like Spotify sorting by popularity, the same principles apply. This assignment gives you a solid foundation for building interactive, data-driven web apps.

Conclusion

You've now built a fully functional album filtering system using the Fetch API, map, filter, and sort. This is exactly what you need for CPSC 1520 assignment 2. Practice by adding more features, like filtering by genre or year. Happy coding!