CODEWITHSUNDEEP
arraysangularfirebasecollectionspush
Andreea Popa
Andreea Popa

Reputation: 49

Pushing an array of objects into Firebase Collection Angular 8

I am trying to add a document into an array studyList in my users collection.

So i have a collection users where i have name, etc.. and studyList.

enter image description here

When i click on a button buy into a DocumentItemComponent i want to add that document into this studyList array.

My code works partially because it adds the document into the array but when i click on another document it changes the first one, it doesn't add another document.

This is my code for the adding function:


   addToStudyList(user) {
        const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/${user.id}`);
        const data: UserInterface = {
          studyList: [{
            title: this.document.title,
            language: this.document.language,
            description: this.document.description,
            cover: this.document.cover,
            category: this.document.category,
            field: this.document.field,
            id: this.document.id,
            author: this.document.userUid,
            urlDocument: this.document.urlDocument
          }]

        }
        return userRef.set(data, {merge: true});

   }

Can you help me, please? Thank you! Have a good day!

Upvotes: 0

Views: 2176

Answers (2)

ploofah
ploofah

Reputation: 77

This is because when you declare:

  studyList: [{
            title: this.document.title,
            language: this.document.language,
            description: this.document.description,
            cover: this.document.cover,
            category: this.document.category,
            field: this.document.field,
            id: this.document.id,
            author: this.document.userUid,
            urlDocument: this.document.urlDocument
          }]

in this piece of code you are assigning just one object to the the studyList array which overwrites the existing array, instead you should utilize the existing user studyList array and push your new object into it, something like this:

  addToStudyList(user) {
    const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/${user.id}`);
    user.studyList.push({
        title: this.document.title,
        language: this.document.language,
        description: this.document.description,
        cover: this.document.cover,
        category: this.document.category,
        field: this.document.field,
        id: this.document.id,
        author: this.document.userUid,
        urlDocument: this.document.urlDocument
      });
    const data: UserInterface = {
      studyList: user.studyList

    }
    return userRef.update(data);

}

Upvotes: 1

Nayak
Nayak

Reputation: 772

There is no direct way to update an array inside a document, but if you are using Firestore, it provides arrayUnion and arrayRemove functions which you can use for adding/removing unique items in the array.

From firestore documentation https://firebase.google.com/docs/firestore/manage-data/add-data#update_elements_in_an_array :

Try this:

userRef.update({
  studyList: firebase.firestore.FieldValue.arrayUnion(data)
});

Upvotes: 3

Related Questions