Why does my OMDB API movie search require two clicks to display results?

Other Questions JavaScript
1

I’m working on a practice project that uses the OMDB API to show movie info when users search. But I’ve run into a weird issue. The search only works after clicking the button twice. Here’s what’s happening:

  1. First click: The API responds and fills my array (fullMovies).
  2. Second click: The movie details finally display on the page.

I suspect it might be related to async/await, but I can’t figure it out after hours of work. Can anyone point out what I’m missing?

Here’s a simplified version of my code:

form.addEventListener('submit', (e) => {
  e.preventDefault();
  getMovies();
});

async function getMovies() {
  const movieData = await fetchMovieData();
  movieData.Search.forEach(movie => movies.push(movie));
  await searchMovieDetails();
}

async function searchMovieDetails() {
  for (let movie of movies) {
    const data = await fetchMovieDetails(movie.Title);
    fullMovies.push(data);
  }
  displayMovies();
}

function displayMovies() {
  fullMovies.forEach(movie => {
    // Create and append HTML for each movie item
  });
}

Any ideas on how to resolve this so it works with just one click? Thanks!

2

hey, i had a similar problem with my movie app. try moving displayMovies() right after searchMovieDetails() in getMovies(). also, clear any old results before showing new ones. if that doesnt work, maybe theres a delay with the API? try adding some console.logs to see whats happening when. good luck!

3

I’ve faced a similar issue with API calls in my projects. The problem likely stems from how the state updates are handled. Here’s what worked for me:

Try moving the displayMovies() call inside getMovies(), right after searchMovieDetails(). This ensures the display function runs immediately after all data is fetched.

Also, consider using Promise.all() to fetch movie details. It’s more efficient:

async function searchMovieDetails() {
  const detailPromises = movies.map(movie => fetchMovieDetails(movie.Title));
  fullMovies = await Promise.all(detailPromises);
}

Lastly, double-check that your UI is clearing previous results before displaying new ones. Sometimes, old data lingering can make it seem like the new search isn’t working on the first click.

If these tweaks don’t solve it, the issue might be in how the API responds or how the data is being processed. Logging the API responses at each step could provide more insight.

4

The issue you’re facing is likely due to the asynchronous nature of your API calls. Your displayMovies() function is being called before the data is fully fetched and processed. To fix this, try moving displayMovies() inside getMovies(), right after await searchMovieDetails(). This ensures all data is ready before displaying.

Also, consider using Promise.all() for fetching movie details. It’s more efficient:

async function searchMovieDetails() {
fullMovies = await Promise.all(movies.map(movie => fetchMovieDetails(movie.Title)));
}

Lastly, clear any previous results before displaying new ones to avoid confusion. If these changes don’t resolve the issue, add console.logs throughout your code to pinpoint where the delay is occurring. This will help you understand the flow of data and identify any potential bottlenecks in your API calls or data processing.