How to delete object from array in firestore

Question

I have a problem with deleting an Object out of an Array in firestore. I have this data in firestore:

And now I would like to delete e.g the second Object out of the posts Array.

Code:

 deletePic () {
  let docId = `${this.currentUser.uid}`

   fb.usersCollection.doc(docId).update({
     posts: firebase.firestore.FieldValue.arrayRemove()
   })
  .catch(function(error) {
      console.error("Error removing document: ", error);
  });
}

But I do not know how to define arrayRemove()

These are the pictures and each one has a delete button to delete the picture.

See https://stackoverflow.com/questions/52150545/how-to-add-or-remove-item-to-the-the-existing-array-in-firestore — rolznz, Nov 12 '19 at 03:48

score 56 · Answer 1 · edited Jun 20 '20 at 09:12

56

You could also use the arrayRemove method from the FieldValue helper.

docRef.update({
   array: FieldValue.arrayRemove('idToRemove');
});

https://firebase.googleblog.com/2018/08/better-arrays-in-cloud-firestore.html

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 15 '20 at 04:20

Evin1_

12,292
9
45
47

30

This one work only for simple arrays as ["test","test2"] not if u have array of objects [{},{},{}] – Patrik Spišák Oct 13 '20 at 13:03
@PatrikSpišák instead of saving an array convert is to a map before. – Walter Monecke Jul 24 '21 at 09:45

Fabien Greard · Accepted Answer · 2021-03-24T01:13:55.653

21

EDIT: Warning Do not use my solution as it is more than 3 years old, nowadays there is new solution : https://stackoverflow.com/a/59745086/6668441 Mine was a pure js one and is a bad pattern.

Can't you use filter ? And then return the new posts array to your fb.usersCollection method

//deleteId is the id from the post you want to delete
posts.filter(post => post.id !== deleteId);

edit : So This should be something like :

 deletePic (deleteId) {
  let docId = `${this.currentUser.uid}`

   //deleteId is the id from the post you want to delete

   fb.usersCollection.doc(docId).update({
     posts: posts.filter(post => post.id !== deleteId);
   })
  .catch(function(error) {
      console.error("Error removing document: ", error);
  });
}

edited Mar 24 '21 at 01:13

answered Sep 03 '18 at 13:13

Fabien Greard

1,854
1
16
26

and where to set the delete() or arrayRemove()? – Lukas Sep 03 '18 at 13:14
This will store a new array without the post you delete, so this is your `delete()` method – Fabien Greard Sep 03 '18 at 13:16
I updated my answer, then you must get the deleteId from the user click delete button – Fabien Greard Sep 03 '18 at 13:21
the deleteId should contain inside the object or? – Lukas Sep 03 '18 at 13:22
deleteId is something you pass through your function, when the user click on the button you want to get the id of the post or any other information you can use to find the post you want to delete – Fabien Greard Sep 03 '18 at 13:24
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/179323/discussion-between-fabien-greard-and-lukas). – Fabien Greard Sep 03 '18 at 13:25
2

If you are working with a big amount of data, you w'll download all the elements to your app just to delete one. It's not optimized. – BorisD Sep 17 '20 at 09:12
I recommend using @Evin1_ method ! – BorisD Sep 17 '20 at 09:27

score 13 · Answer 3 · answered Nov 09 '20 at 13:34

You can preform delete of an object in the array by using arrayRemove function. But, you'll need to provide an object. That object needs to be identical to the one in your doc array on the firestore collection.

For example:

The following code will delete obj from myArray array, but only if obj exactly exist in that array.

const obj = { field1, field2 ... } 

collectionRef.doc(docId).update({
    myArray: firebase.firestore.FieldValue.arrayRemove(obj)
})

score 3 · Answer 4 · answered Nov 08 '20 at 17:25

Update elements in an array

If your document contains an array field, you can use arrayUnion() and arrayRemove() to add and remove elements. arrayUnion() adds elements to an array but only elements not already present. arrayRemove() removes all instances of each given element.

// Atomically remove a region from the 'regions' array field.
city_ref.update({u'regions': firestore.ArrayRemove([u'east_coast'])})

score 0 · Answer 5 · answered Oct 01 '21 at 20:16

If you're using Firebase V9 (modular), you can simply import arrayRemove from Firestore like so:

import { doc, updateDoc, arrayRemove } from 'firebase/firestore';

const docRef = doc(db, 'collection', 'doc');
await updateDoc(docRef, {
  arrayName: arrayRemove('elementName');
});

How to delete object from array in firestore

5 Answers5

Linked