Setting Your Own Key When Adding an Object to Firebase - AngularFire

Question

I can use the following to add an object to my Firebase data store:

var uniqueId = {
    name: "a name",
    location: "new york"
}
$scope.myItems.$add(uniqueId).then(function(firebaseId){
    // do something on success
}, function(){
    // do something if call fails
});

The above will add an object into my data store and if the add is successful, an ID generated by Firebase is returned. The object I just added is saved under this key.

Is there a way for me to specify what the key name is when I add to my data store?

Solution 1

Everything in Firebase is a URL.

Take the following URL for example.

https://myapp.firebaseio.com/users/

Let's say we want to create a user with a key of 1 as a child at this location. Our URL would look like this.

https://myapp.firebaseio.com/users/1

To create a user using AngularFire we can create a reference at the users node and call $child(1) to create a reference to that location.

var usersRef = new Firebase('https://myapp.firebaseio.com/users');
var userRef = new Firebase('https://myapp.firebaseio.com/user/1');

$scope.users = $firebase(usersRef);

// these are the same
$scope.userOne = $firebase(userRef);
$scope.userOne = $scope.users.$child(1);

Then we can use $set to store the value of the user at that location.

var usersRef = new Firebase('https://myapp.firebaseio.com/users');
$scope.users = $firebase(usersRef);
$scope.users.$child(1).set({
  first: 'Vincent',
  last: 'Van Gough',
  ears: 1
});

In your case it would be:

var uniqueId = {
    id: 1,
    name: "a name",
    location: "new york"
};
$scope.myItems.$child(uniqueId.id).$set(uniqueId);

Remember that using $set will destroy any previous data at that location. To non-destructively update the values use $update.

Solution 2

You can try it like this:

var empsRef = ref.child("employees");

empsRef.child('11111').set({
  lastname: "Lee",
  firstname: "Kang"
});

empsRef.child('22222').set({
  lastname: "Nut",
  firstname: "Dough"
});

The output should look like this:

"employees" : {
  "11111" : {
    "lastname" : "Lee",
    "firstname": "Kang"
  },
  "22222" : {
    "lastname" : "Nut",
    "firstname": "Dough"
  }
}

Solution 3

It looks like $child and $set have been removed from the AngularFire API.

Here is my workaround.

1. Listen for $onAuth
2. Create a new $firebaseObject with the ref as a child of users and the id as the uid (in this case, facebook)

3. Save the user object

   angular.module("app.services", []).factory("Auth", function ($firebaseAuth, $firebaseObject, FirebaseUrl) {
   var auth = $firebaseAuth(new Firebase(FirebaseUrl));
   
   auth.$onAuth(function (authData) {
       if (authData) {
           var ref = new Firebase(FirebaseUrl + "/users/" + authData.uid);
           var user = $firebaseObject(ref);
           user.name = authData.facebook.displayName;
           user.$save().then(function () {
               console.log(user);
           });
       }
   });
   return auth;
   })
   

I am still struggling to make this testable though...

Comments

[Lloyd Banks]

I knew about the $child + $set combination. I just didn't know you had to chain the two together to make it work. If you call $child then $set with two separate commands, changes won't go through

[David East]

That's because $child returns a $firebase object. You won't have to chain them together if you store the result either in variable or on $scope.

[Maher Manoubi]

I have tried this exact same code with my own server but it doesn't work. I always get undefined is not a function referring to $child. I suspect that the new API doesn't include $child. It doesn't even appear in their API documentation: firebase.com/docs/web/libraries/angular/…

[David East]

Yes, the API for AngularFire has had major updates since the 0.8 update. $child was removed in that version.

[Chrillewoodz]

@DavidEast what's the new equivalent to $child? can't find it when reading here: firebase.com/blog/2014-07-30-introducing-angularfire-08.html Please help.

[Hans de Wit]

@DavidEast $set seems to be missing from AngularFire too. How can one specify a key for the newly created object in the $firebaseArray?