How To Append An Array's Data To A Dom Element In Order Of Retrieval/insertion From Firebase?

Using Google Firebase Firestore to store data and the Open Movie Database (OMD) with Axios to get movie information. I'm making a website where you can add movies to collections. I

Solution 1:

The problem is that your axios.get("https://www.omdbapi.com/ calls all happen in parallel, and there's no guarantee they will complete in the order in which you start them.

You can either fire them sequentially (one by one), or you can add the element to the HTML before firing the get call, and then update the element when you get a response.

Something like this:

functionaddMovieElementToContainerForID(movie_imdbID) {
    document.getElementById("movies-collections-container").innerHTML +=
      `<div class="movie-container" id="movie_${movie_imdbID}"></div>`;
}
functionupdateMovieElement(movie_imdbID, res) {
  let elm = document.getElementById(`movie_${movie_imdbID}`);
  elm.innerHTML = `
    <div class="movie-image">
        <img src=${res.data.Poster} alt="${res.data.Title} Poster">
    </div>

    <div class="movie-content">
        <div class="add-content-container">
            <div>
                <h2 class="movie-name">${res.data.Title}</h2>
                <p class="movie-release-date">Released: ${res.data.Year}</p>
            </div>
        </div>
    </div>
  `;
}

Object.keys(movies_collections).forEach(movies_collection_object => {
    const movies_collections_movies_array = movies_collections[movies_collection_object].movies;

    movies_collections_movies_array.forEach(movie => {
        let movie_imdbID = movie.split("_")[0];

        addMovieElementToContainerForID(movie_imdbID);

        axios.get("https://www.omdbapi.com/?i=" + movie_imdbID + "&apikey=56bdb7b4").then((res) => {
             updateMovieElement(movie_imdbID, res)
        })
    })
})