CODEWITHSUNDEEP
javascriptangularjsfirebasefirebase-realtime-database
Danial
Danial

Reputation: 11

How to get values and $id from $firebaseArray in angularJS

Hi I'm not a pro in firebase, just started working in it. After searching through many places I couldn't find solution to my problem. My firebase database structure is as follow: I want to retrieve data of a specific profile along with unique $id generated by firebase and.

  $scope.login = function(users)
  {
  firebase.auth().signInWithEmailAndPassword(users.email, users.password)
  .then(function(result)
  {
      var ref = firebase.database().ref("/profiles");
      var examination =  $firebaseArray(ref.orderByChild('uid').equalTo(result.uid));
      console.log(examination);

and result I'm getting is like this Can anyone help me in this regard i.e. how to get values from result. Thanks In advance.

Upvotes: 1

Views: 805

Answers (2)

georgeawg
georgeawg

Reputation: 48968

Use the $loaded() promise to see the value: 

 $scope.login = function(users)
  {
  firebase.auth().signInWithEmailAndPassword(users.email, users.password)
  .then(function(result)
  {
      var ref = firebase.database().ref("/profiles");
      var examination =  $firebaseArray(ref.orderByChild('uid').equalTo(result.uid));
      //console.log(examination);
      examination.$loaded().then(function (exam) {
          console.log(exam);
      });

It is important to realize that invoking a $firebaseArray method immediately returns an empty array. Once the data is returned from the server the existing reference is populated with the actual data.

The $loaded() method returns a promise which is resolved when the array data has been downloaded from the database. The promise resolves to the $firebaseArray.

Upvotes: 1

Frank van Puffelen
Frank van Puffelen

Reputation: 598787

If you want to retrieve data and log it in your code, don't use AngularFire and stick to the JavaScript SDK:

$scope.login = function(users) {
  firebase.auth().signInWithEmailAndPassword(users.email, users.password)
  .then(function(result) {
    var ref = firebase.database().ref("/profiles");
    var examination = ref.orderByChild('uid').equalTo(result.uid);
    examination.on('value', function(snapshot) {
      console.log(snapshot.val());
    });

You'll note that I added on('value', which is how you tell the Firebase SDK to start loading the data from the database. This and much more is covered in the Firebase documentation for web developers and I highly recommend that you read that end-to-end. A few hours spent there, will more questions than you imagine.

If you prefer sticking to AngularFire, then you should stop using console.log for checking loading status. From the AngularFire quickstart:

... $scope.data is going to be populated from the remote server. This is an asynchronous call, so it will take some time before the data becomes available in the controller. While it might be tempting to put a console.log on the next line to read the results, the data won't be downloaded yet, so the object will appear to be empty.

Instead, you can simply show the data directly in the HTML template:

The easiest way to log the data is to print it within the view using Angular's json filter. AngularFire tells the Angular compiler when it has finished loading the data, so there is no need to worry about when it be available.

<pre>{{ data | json }}</pre>

This last snippet comes from handling asynchronous operations in the AngularFire guide.

Upvotes: 1

Related Questions