How to remove an array item from a nested document in firebase?

Question

I'm working on a Vue,firebase app and I'm saving the userevents in a firebase collection, I update this userevents array when a user schedule an event and want to delete it when the user cancels or remove it,

users(collection) -
 test123(document) -
      "id" . --fields
      "username" . --fields
      "userevents" . --array
         [0]
            "eventid"
            "date"
            "desc"
            "status"
         [1]
            "eventid"
            "date"
            "desc"
            "status"

From UI, if the user cancels an event, I will have the eventid and want to delete it from the userevents array. I tried removing the item from the array using below code, but it is deleting all the items from the userevents,

userRef.update({
    eventid: firebase.firestore.FieldValue.delete()
});

Is there a way to achieve this in firebase?

Answer 1

Firestore currently doesn't support deleting elements from an array using just a field from an element in that array (in your case, eventid). There are a couple of workarounds:

Method 1

You can use FieldValue.arrayRemove to remove an element from an array by value. The value has to match the whole element in the array, and it will delete all elements in the array that match that value. You can read more about that, and manipulating arrays in general here. Since your array elements are objects, the code would look like this:

userRef.update({
    "userevents": firebase.firestore.FieldValue.arrayRemove({"eventid": ..., "date": ..., "desc":..., "status":...})
});

Method 2

You're currently storing objects inside of an array. What you could do is make userevents a map (an object) instead of an array. Assuming that eventid is unique, you can index the map by eventid and then just delete the entry from the map like this:

userRef.update({
    ['userevents.' + eventid]: firebase.firestore.FieldValue.delete()
});