How to store array in firebase using Angular

Question

I need to store Array in Firebase using Angular. I am not able to achieve this. Kindly please help. What I am getting is this:

what I want is this:

-|bucketList
    |-zjSaw3efefsfsdffg
       0-| bItem: 'thailand'
         | isCompleted: false

       1-| bItem: kasar devi
         | isCompleted: false

and so on

I am doing this:

 const bucketRef = this.angularFireDb.list('/bucketList/' + uid );
 bucketRef.push(bucketListItems);

Can you share the content of the bucketListItems object please. — Renaud Tarnec
– Renaud Tarnec, Commented Jan 21, 2020 at 9:01
@RenaudTarnec yes. I am sending an object {bItem: this.bucketListItem, isCompleted: false} and this.bucketListItem is dynamic i.e. comes from user — Anuj Gajbhiye
– Anuj Gajbhiye, Commented Jan 21, 2020 at 9:04
So you are pushing object by object, not as an that contains several {bItem: this.bucketListItem, isCompleted: false}. Since you push an object called bucketListItems with an s I thought maybe you push a list of objects (even if the ids of each object does seem to come from an individual push). — Renaud Tarnec
– Renaud Tarnec, Commented Jan 21, 2020 at 9:06
actually, the functionality is such that I've to push 1 object at a time and it should update in database with each push like 0 1 2 .... is this possible ? @RenaudTarnec — Anuj Gajbhiye
– Anuj Gajbhiye, Commented Jan 21, 2020 at 9:09

Renaud Tarnec · Accepted Answer · 2020-01-21 09:25:24Z

1

By using push() you generate a new node with an id that is automatically generated by Firebase (-Lz6G...).

If you want to write a node with an id that you generate (0, 1, 2 in your case) you will have to use the set() method.

The problem you may encounter in your case (since you create objects like {bItem: this.bucketListItem, isCompleted: false} one by one) is that you don't know what is the last id present in the database. So you will have to query the database to find the value of the last id and increment it (preferably through a transaction).

Or, if you are able to create the objects in one batch using an array of objects, as follows, the node ids will follow the 0, 1, 2 sequence.

You can try the following:

  var bucketListItems = [
    { bItem: 'Item1', isCompleted: false },
    { bItem: 'Item2', isCompleted: false }
  ];

  const bucketRef = this.angularFireDb.list('/bucketList/');

  bucketRef.set(uid, bucketListItems);

answered Jan 21, 2020 at 9:25

Renaud Tarnec

83.4k10 gold badges99 silver badges130 bronze badges

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

4 Comments

Anuj Gajbhiye Over a year ago

this.angularFireDb.object('/bucketList/' + uid).set({ 0: bucketListItems}); if I do something like this, then it works for only 1 item. which means, if i do this.angularFireDb.object('/bucketList/' + uid).set({1: bucketListItems}); then it will overwrite the existing one.

Renaud Tarnec Over a year ago

And what if you do this.angularFireDb.object('/bucketList/' + uid + '/0').set(bucketListItems); and then this.angularFireDb.object('/bucketList/' + uid + '/1').set(bucketListItems);?

Anuj Gajbhiye Over a year ago

I tried something and it worked which kind of saved me the hassle of keeping track of the iteration. I have posted the answer. Please check and Thank you.

Renaud Tarnec Over a year ago

If I understand correctly you are using an array to save the different bucketListItems

Anuj Gajbhiye · Accepted Answer · 2020-01-21 09:50:14Z

0

I tried somethings and figured out something. Posting it so that it can help anybody looking for same thing.

In my component, I am first pushing the object in an array and then sending that array to the service

      this.bucketListArray.push({bItem: this.bucketListItem, isCompleted: false});
      this.authService.saveUserBucketListInDb(this.bucketListArray);

In my service what I am doing is:

saveUserBucketListInDb(bucketListItems: Array<object> ) {

this.angularFireDb.object('/bucketList/' + uid).set({
  bucketListItems
});

}

which ultimately gave me what I was looking for i.e.:

Thank you.

answered Jan 21, 2020 at 9:50

Anuj Gajbhiye

741 silver badge6 bronze badges

Collectives™ on Stack Overflow

How to store array in firebase using Angular

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related