Firebase Firestore - How to push an item inside an array which is inside a map/object?

Question

This is how it looks inside users>{uid}:

movies_collections = {
    Action: ["tt0088247", "tt0103064", "...", "..."],
    Comedy: ["...", "...]
    .
    .
    .
}

So... the "movies_collections" object/map has keys which are the custom names of the movie collections the user sets, and each of those keys is paired with an array of strings containing imdbID's of movies.

What I'm struggling to do:

On my website, when a user clicks on the plus sign beside a movie, it shows them the names of the movie collections they have (Action, Comedy, etc.). The next step I want to achieve is when the user clicks on a movies_collections key, I want to add the movie they're currently under into the array of the key

Currently, when the user clicks on the plus button, it shows them their available movie collections:

Here is the code for that:

// Each "plus" button attached to a movie has the id of the movie's imdbID, which starts with a "t"
if (e.target.id[0] === "t") {
        // Get the movie's imdbID
        const movieID = e.target.id;

        // Get the available movie collections
        firebase
            .firestore()
            .collection("users")
            .doc(firebase.auth().currentUser.uid)
            .get()
            .then((doc) => {
                // Get a reference to the "movies_collections" collection, which is an object
                const moviesCollection = doc.data().movies_collections

                // Show user's movies collections
                Object.keys(moviesCollection).forEach(collection => {

                    // Add each key to the innerHTML of the "Add to Collection" button's parent element
                    document.getElementById(movieID).parentElement.parentElement.parentElement.innerHTML +=
                        `
                        <br>
                        <a class="collection-button" id="${collection} ${movieID}" href="#">
                            ${collection}
                        </a>
                        `
                })
            })
    }

Then, when the user clicks on a movies_collections key (say, Action), I have the following code:

// When a movie collection is clicked, add the movie to the collection
    if (e.target.className === "collection-button") {

        // 1st ID of the collection button = name of the "movies_collections" key in Firestore
        const collectionName = e.target.id.split(" ")[0].toString();

        // 2nd ID of the collection button = the movie's imdbID
        const movieIdName = e.target.id.split(" ")[1];

        // Get the movies_collections key with that id inside Firestore, and insert the value of the second id into that key as a value. Basically, add the new movie into the array of the collection the user wants to add it to.
        firebase
            .firestore()
            .collection("users")
            .doc(firebase.auth().currentUser.uid)
            .get()
            .then((doc) => {

                // TODO: append the movies_collections key with the new movie's imdbID

            })
    }

This is where I'm stuck. I can't figure out how to add/push the movie's imdbID into the corresponding collection's array. Any help is appreciated.

You can use an arrayUnion to push a new value on to an array as answered here: https://stackoverflow.com/questions/48231957/firestore-add-value-to-array-field and SDK doc here: https://firebase.google.com/docs/reference/js/firebase.firestore.FieldValue#arrayunion — Brettski, Aug 13 '21 at 06:14

score 1 · Accepted Answer · answered Aug 13 '21 at 07:04

You can use arrayUnion with dot notation to add item in a nested array.

const docRef = firebase.firestore().collection("users").doc(firebase.auth().currentUser.uid)
const catergory = "Action"

docRef.update({
  `movies_collection.${category}`: firebase.firestore.FieldValue.arrayUnion("the_movie_id")
                  //^ dot notation 
}).then(() => {
  console.log("Doc updated") 
}).catch((e) => console.log(e))

Firebase Firestore - How to push an item inside an array which is inside a map/object?

1 Answers1