Utilizing Google Firebase Firestore for data storage and the Open Movie Database (OMD) in combination with Axios to retrieve movie information.
I am currently developing a website that allows users to add movies to collections. On the collections page, all the movies added to any collection are displayed. These collections are stored within the user's Firestore document.
Below is an example of what a particular user's entire movie collections object looks like:
movies_collections = {
"New": {
"description": "",
"movies": [
"tt0092007_2021-08-19T21:00:45.072Z",
"tt0042192_2021-08-19T21:01:06.280Z",
"tt0160862_2021-08-19T21:01:09.345Z",
"tt0164184_2021-08-19T21:01:12.662Z",
"tt5294550_2021-08-19T21:01:17.820Z"
],
"dateCreated": {
"seconds": 1629406839,
"nanoseconds": 22000000
},
"createdBy": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12747d7d52757f737b7e3c717d7f">[email protected]</a>"
},
"Summer Watchlist": {
"description": "to watch this summer",
"movies": [
"tt6964748_2021-08-20T02:37:21.933Z",
"tt0043274_2021-08-20T02:37:29.024Z"
],
"dateCreated": {
"seconds": 1629427029,
"nanoseconds": 718000000
},
"createdBy": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15737a7a557278747c793b767a78">[email protected]</a>"
}
}
Here is the code responsible for fetching these movies and dynamically adding them to the DOM:
const userDocRef = firebase.firestore().collection("users").doc(firebase.auth().currentUser.uid);
// Retrieve movie collections
userDocRef.get().then((doc) => {
// Reference to movies_collections
const movies_collections = doc.data().movies_collections;
// Iterate over each key in movies_collections
Object.keys(movies_collections).forEach(movies_collection_object => {
// Get the movies array under movies_collections -> {collection_name}
const movies_collections_movies_array = movies_collections[movies_collection_object].movies;
// Iterate over each imdbID inside movies_collections -> {collection_name} -> movies array
movies_collections_movies_array.forEach(movie => {
// Extract imdbID from the movie string
let movie_imdbID = movie.split("_")[0];
// Retrieve movie details using OMDB API
axios.get("https://www.omdbapi.com/?i=" + movie_imdbID + "&apikey=56bdb7b4").then((res) => {
// Append movie poster, title, and year to the DOM
document.getElementById("movies-collections-container").innerHTML +=
`
<div class="movie-container">
<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>
</div>
`
})
})
})
})
The issue arises when appending movies to the DOM as they seem to appear randomly despite being retrieved in order. If I refresh the collections page, the order changes each time.
How can I ensure that my code appends each movie to the DOM based on their order in the "movies" array? The timestamp of each movie insertion into the array has also been included. *