J_tt J_tt - 1 month ago 15
AngularJS Question

Accessing Firebase snapshot result in Angular function

I'm trying to get the profile image of a user stored in Firebase at

/user/[uid]/info/photoURL


I am doing this using Angular functions.

My Code

HTML:

<img ng-src="{{getImg(user.uid)}}" alt="">


Javascript:

$scope.getImg = function(uid) {
// return uid;
promise = firebase.database().ref("/users/" + uid + "/info/").once("value");
promise.then(function(snapshot) {
return snapshot.val().photoURL;
}, function() {
return "Error :(";
});
};


I am getting:
TypeError: snapshot.val(...) is null


I have also tried:

firebase.database().ref("/users/" + uid + "/info/").once("value").then(function(snapshot) {
return snapshot.val().photoURL;
});


But that does not return any data.

Edit:

Here is the structure of what I am trying to load:

"[user uid]" : {
"info" : {
"name" : "Jett Jackson",
"photoURL" : "[URL to photo]"
}
}


Edit: Using this in ng-repeat and for a single user.

Edit: here is the surounding code:

route.controller("dashController", ["$scope", "$http", "$routeParams", "$firebaseArray", "$firebaseObject", "$sce", function($scope, $http, $routeParams, $firebaseArray, $firebaseObject, $sce) {
var postsRef = firebase.database().ref().child("posts"),
query = ($firebaseArray(postsRef), postsRef.orderByChild("timestamp").limitToLast(5));
$scope.posts = $firebaseArray(query);

firebase.auth().onAuthStateChanged(function(user) {
user ? $scope.user = user : $scope.user.displayName = "Signed Out";
});
$scope.getImg = function(uid) {
// return uid;
promise = firebase.database().ref("/users/" + uid + "/info/").once("value");
promise.then(function(snapshot) {
return snapshot.val().photoURL;
}, function() {
return "Error :(";
});
};

}]);


HTML:

In the posts:

<div ng-repeat="post in posts | reverse" class="item">
<a href="/#/post/{{post.$id}}"><div class="img">
<img src="{{post.thumbnail}}" alt="">
</div></a>
<div class="column center-vert">
<h1>{{post.title}}</h1>
<p>{{post.preview}}</p>
<div class="icons row">
<i class="icon-heart"></i>{{post.starCount}}<div class="pad"></div><i class="icon-user"></i>
<div class="timestamp">12 hours ago</div>
</div>
</div>
<div class="author">
<img src="{{getImg(post.uid)}}" alt="">
<p>{{post.author}}</p>
</div>
</div>


In the user:

<div class="userImageContainer">
<img ng-src="{{getImg(user.uid)}}" alt="">
</div>

Answer

Using angular functions in a ng-repeat loop turned out to be a bad idea. I fixed my issue by changing my code to:

Posts:

var postsRef = firebase.database().ref().child("posts");
    query = ($firebaseArray(postsRef), postsRef.orderByChild("timestamp").limitToLast(5));
    $scope.posts = $firebaseArray(query);
    $scope.posts.$loaded(function() {
      var length = $scope.posts.length;
      for (var i = 0; i < length; i++) {
          var uid = $scope.posts[i].uid;
          if ($scope.postUser[uid]!==undefined){
          } else {
            ref[uid] = firebase.database().ref().child("/users/" + uid + "/info/");
            $scope.postUser[uid] = $firebaseObject(ref[uid]);
          }
      }

User:

$scope.$on('user-logged-in', function (event, args) {
        var ref = firebase.database().ref().child("/users/" + $scope.uid + "/info/");
        $scope.user = $firebaseObject(ref);
    });

Which arguably it should have been before.

Thanks @Searching for your help <3