如果Firebase中不存在对象，如何显示其他数据？

Question

Alright, I am passing way too much time on this one, seems completely trivial but somehow I can not sort it out.

I am trying to display the data from an object to my DOM :

// Listen to every people in our query...
  geoQuery40.on("key_entered", function(key) {
    // ... and look them up by key ...
    restaurantsRef40.child(key).on("value", function(snapshot42) {
      var restaurant40 = snapshot42.val();
      console.log(restaurant40);
      var displayBusinessName = snapshot42.val().name;
      console.log(displayBusinessName);
      var displayBusinessDescription = snapshot42.val().description;
      $timeout(function() {
        if (snapshot42.exists()) {
          $timeout(function() {
      $scope.displayBusinessName = displayBusinessName;
      $scope.displayBusinessDescription = displayBusinessDescription;
    })
    } else {
      $timeout(function() {
      $scope.displayBusinessName = "displayBusinessName";
      $scope.displayBusinessDescription = "displayBusinessDescription";
    })
    }
    })
    });
  });

Now, if the snapshot42 is empty / has nothing, I want to redefine what I show. It just doesn't work.

Here is my DOM :

<div class="content2" ng-controller="businessPageController">
    <div id="map"></div>
    <div class="profile-info">
                <!-- *profile-image / image profile -->
                <img class="profile-image" src="img/100.jpg">
                <!-- *profile-name / name profile -->
                <h3 class="profile-name">{{displayBusinessName}}</h3>
                <!-- *profile-description / description profile -->
                <span class="profile-description">
                    {{displayBusinessDescription}}
                </span>
        <br /><br />
                </div>
            </div>

Any solution ?

Answer 1

Your problem may be that you attempt to access the value, before checking whether the value even exists. Ie you call snapshot42.val().name before calling snapshot42.exists() . If the value doesn't exist, snapshot42.val() will return null, which will throw an error saying Cannot read property 'name' of null once you try to access properties on it. You havn't provided any information regarding any error messages though, so it's just a shot in the dark.

Anyways, if the above is in fact the problem, the following changes would solve them:

geoQuery40.on("key_entered", function(key) {
    // ... and look them up by key ...
    restaurantsRef40.child(key).once("value", function(snapshot42) {
        if(snapshot42.exists()){
            var restaurant40 = snapshot42.val();
            $scope.$apply(function(){
                $scope.displayBusinessName = restaurant40.name;
                $scope.displayBusinessDescription = restaurant40.description;
            });
        }else{
            $scope.$apply(function(){
                $scope.displayBusinessName = "displayBusinessName";
                $scope.displayBusinessDescription = "displayBusinessDescription";
            });
        }
    });
});