Pushing an array of objects into Firebase Collection Angular 8

Question

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.

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!

Nayak · Accepted Answer · 2020-05-13 12:08:51Z

3

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)
});

answered May 13, 2020 at 12:08

Nayak

7626 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Andreea Popa Over a year ago

Yes i am using firestore and i read the documentation but i don't know exactly how to use this. I'm only injecting firestore in the constructor. Should i import something else? That's the error: DocumentItemComponent.html:62 ERROR TypeError: Cannot read property 'fieldValue' of undefined at DocumentItemComponent.addToStudyList

Nayak Over a year ago

Whichi library are you using for firebase? Try import * as firebase from 'firebase/app'

Andreea Popa Over a year ago

I tried with this but it's not working, i don't know why. Anyway i solved my issue with Nayak's answear, thank you very much!

Nayak Over a year ago

I'm the same guy :) Normally I prefer to not send a lot of data over the network everytime, so was trying to see if this works, then you might be able to send only one item, rather than sending all the items everytime you make an add/edit. Anyways, if sending all data works for your case, you are good to go. Thanks!

Andreea Popa Over a year ago

Ups, i didn't look at the name! Sorry

ploofah · Accepted Answer · 2020-05-14 08:56:10Z

1

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);

}

edited May 14, 2020 at 8:56

answered May 13, 2020 at 12:08

ploofah

7710 bronze badges

4 Comments

Andreea Popa Over a year ago

I tried this way @ploofah but now in firebase it is ''studyList: 2''. I think it takes the number of documents.

Nayak Over a year ago

I have updated the data object above. This should fix the issue with 2 getting saved. updatedStudyList had the length of the array after pushing.

Nayak Over a year ago

yeah sorry.. I just realized the edits won't be visible until moderators approve it. :) Just use the above line of code.

Andreea Popa Over a year ago

It works perfectly!! Thank you so much! I really appreciate it! You're a hero.

Collectives™ on Stack Overflow

Pushing an array of objects into Firebase Collection Angular 8

2 Answers 2

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related