CODEWITHSUNDEEP
firebaseangularfire
Crushingminds
Crushingminds

Reputation: 3

Duplicate data on push/add to firebase using angularfire

Is there a way (maybe using rules) to duplicate data on add/push to firebase?

What I want to archive is when I do an add to a firebase array I want to duplicate the data to another array.

So this is my firebase structure: 

my-firebase: {
  items: [ ... ],
  queue: [ ... ]
}

And this is how I have my services defined:

.factory('Service1',['$firebaseArray', function($firebaseArray) {
  var items =  new Firebase('my-firebase.firebaseio.com/items');
  return $firebaseArray(items);
}])

.factory('Service2',['$firebaseArray', function($firebaseArray) {
  var queue =  new Firebase('my-firebase.firebaseio.com/queue');
  return $firebaseArray(queue);
}])

And here is how I use them:

.controller('controller', function($scope, Service1, Service2) {  

  $scope.save = function() {  
    Service1.$add({name: "test1"});
    Service2.$add({name: "test1"});
  }
};

And want I to have a single call not a duplicate call/code but having the result in both arrays (items and queue).

Thanks so much!

Upvotes: 0

Views: 994

Answers (2)

Kato
Kato

Reputation: 40582

Frank's answer is authoritative. One additional thought here is that AngularFire is extremely extensible.

If you want data pushed to two paths, you could simply override the $add method and apply the update to the second path at the same time:

app.factory('DoubleTap', function($firebaseArray, $q) {
   var theOtherPath = new Firebase(...);
   return $firebaseArray.$extend({
      $add: function(recordOrItem) {
         var self = this;
         return $firebaseArray.prototype.$add.apply(this, arguments).then(function(ref) {
             var rec = self.$getRecord(ref.key());
             var otherData = ...do something with record here...;
             return $q(function(resolve, reject) {
                 theOtherPath.push(rec.$id).set(otherData);
             });
         });
      }
   });
});

Upvotes: 1

Frank van Puffelen
Frank van Puffelen

Reputation: 599041

Always remember that AngularFire is a relatively thin wrapper around Firebase's JavaScript SDK that helps in binding data into your AngularJS views. If you're not trying to bind and something is not immediately obvious, you'll often find more/better information in the documentation of Firebase's JavaScript SDK.

The API documentation for $firebaseArray.$add() is helpful for this. From there:

var list = $firebaseArray(ref);
list.$add({ foo: "bar" }).then(function(ref) {
  var id = ref.key();
  console.log("added record with id " + id);
  list.$indexFor(id); // returns location in the array
});

So $add() returns a promise that is fulfilled when the item has been added to Firebase. With that knowledge you can add a same-named child to the other list:

var queue =  new Firebase('my-firebase.firebaseio.com/queue');
$scope.save = function() {  
  Service1.$add({name: "test1"}).then(function(ref) {
    queue.child(ref.key().set({name: "test1"});
  });
}

This last snippet uses a regular Firebase reference. Since AngularFire builds on top of the Firebase JavaScript SDK, they work perfectly together. In fact: unless you're binding these $firebaseArrays to the $scope, you're better off not using AngularFire for them:

var items =  new Firebase('my-firebase.firebaseio.com/items');
var queue =  new Firebase('my-firebase.firebaseio.com/queue');
$scope.save = function() {
  var ref = queue.push();
  ref.set({name: "test1"})
  queue.child(ref.key().set({name: "test1"});
}

To my eyes this is much easier to read, because we're skipping a layer that wasn't being used. Even if somewhere else in your code, you're binding a $firebaseArray() or $firebaseObject() to the same data, they'll update in real-time there too.

Upvotes: 1

Related Questions