angularfire2 array manipulation

Question

Whats the correct way to deal with arrays in firebase? I'm trying to toggle a value within an array or numbers when clicking a button. so each number exist only once, say button 12, is clicked, then 12 is added to the array in firebase, if clicked again then it's removed.

this is my code, however, it does not splice, the number is added again every time.

blockTime(time: number) {
const idx = _.indexOf(this.times, time);
if (idx >= 0) {
     this.times.splice(idx, 1);
   } else {

  this.times.push(time);
   }
}

yea, I get it like this getDayTimes(day: string): FirebaseListObservable<any[]> { const dayPath = ${this.basePath}/${day}; this.times = this.db.list(dayPath); return this.times; } — Mel Pacheco
– Mel Pacheco, Commented Jan 3, 2018 at 15:23
How would you go about it, if you wanted it removed from firebase? — Mel Pacheco
– Mel Pacheco, Commented Jan 3, 2018 at 15:30

Frank van Puffelen · Accepted Answer · 2018-01-03 16:09:51Z

2

When you're trying to toggle a value in an array, reconsider your data structure. Whenever you do array.contains(...) or array.indexOf(...) you probably should be using a set-like data structure.

Since JavaScript/JSON doesn't have real sets, you typically emulate them (on Firebase at least) by using an object with true values and your set-items as keys. Then suddenly you operation becomes a lot cleaner:

blockTime(time: number) {
  if (!this.times[time]) {
    this.times[time] = true;
  }
  else {
    delete this.times[time];
  }
}

Or if you're fine with keeping non-blocked time slots with a false value:

blockTime(time: number) {
  this.times[time] = !(this.times[time] || false);
}

Note that when storing this type of data in Firebase, it is best to make sure your keys are strings to avoid the array coercion of the Firebase SDKs. You can simply do this by prefixing the keys with a string, e.g.

blockTime(time: number) {
  var key = "time"+number;
  if (!this.times[key]) {
    this.times[key] = true;
  }
  else {
    delete this.times[key];
  }
}

answered Jan 3, 2018 at 16:09

Frank van Puffelen

603k85 gold badges895 silver badges869 bronze badges

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

2 Comments

Mel Pacheco Over a year ago

Hey man, this method feels right to me, maybe I'm not storing the data in the right way. do you have an example fo what the data structure would look like in firebase? I basically have a node called schedule, with a sub-node for each day of the week, the times is what I'm struggling with. thanks in advance

Frank van Puffelen Over a year ago

The data would look like the groups node here: firebase.google.com/docs/database/web/structure-data#fanout

Collectives™ on Stack Overflow

angularfire2 array manipulation

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related