Firebase realtime data in not getting added properly in scope variable angularjs

问题

This is firebase structure for categories2.

and this is for subcategories2.

To display data on screen I want $scope.Categories [] to be filled in this format.

[{
    "id": "1",
    "display_with": "7",
    "image": "/images/salt_sugar.png",
    "name": "Salt & Sugar",
    "subcategories": [{
            "scid": "1",
            "scname": "Sugar Products"
        },

        {
            "scid": "5",
            "scname": "Tea"
        }

    ]
},

.
.
.
.


]

Logic for filling $scope.Categories [].

$scope.Categories = [];
var categoriesRef = firebase.database().ref('categories2');

categoriesRef.on('value', function(snapshot) {
    $scope.Categories = [];

    var recvCategories = [];
    recvCategories = snapshot.val();

    for (var j=0; j<recvCategories.length; ++j){

      var category =  recvCategories[j];
      //alert (category);

      if (category != undefined){

        var category_modified = {};
        category_modified.id = category.id;
        category_modified.display_with = category.display_with;
        category_modified.name = category.name;
        category_modified.image = category.image;

        var subcategories = [];

        for(var key in category.subcategories) {
           var subcategoriesRef = firebase.database().ref('subcategories2/' + key);
           subcategoriesRef.on('value', function(snapshot2) {
              subcategories.push(snapshot2.val());
           });
        }

        category_modified.subcategories = subcategories;
        $scope.Categories.push(category_modified);
      }
    }
    $scope.$apply();  
});

As soon as data is available in want to display it on screen. so i am using $scope.$apply();

The problem is data is not displaying properly. but once i go to other controller and come back to same controller, everything displays as expected.

Why subcategories information is not adding up properly in $scope.Categories[]

回答1:

I just modified your fiddle. just check the following link https://jsfiddle.net/py3ofkyc/8/

  function myFunction() {
    var subcategories = [];
    var subcategoriesRef = firebase.database().ref('subcategories2');
    subcategoriesRef.on('value', function(snapshot2) {
      subcategories = snapshot2.val();

      var Categories = [];
      var categoriesRef = firebase.database().ref('categories2');
      categoriesRef.on('value', function(snapshot) {
          var Categories = [];
          var recvCategories = [];
          recvCategories = snapshot.val();
          _(recvCategories).forEach(function(value) {
            var category =  value;
            if (category != undefined){
              var category_modified = {};
              category_modified.id = category.id;
              category_modified.display_with = category.display_with;
              category_modified.name = category.name;
              category_modified.image = category.image;
              var _subcategories = [];
              for(var key in category.subcategories) {
                var data = _.filter(subcategories, { 'scid': key });
                _subcategories.push(data[0]);
              }
              category_modified.subcategories = _subcategories;
              Categories.push(category_modified);
            }
          });
          console.log(Categories);
      });

    });
  }`

来源：https://stackoverflow.com/questions/38967782/firebase-realtime-data-in-not-getting-added-properly-in-scope-variable-angularjs