Firebase实时数据未能在范围变量angularjs中正确添加 [英] Firebase realtime data in not getting added properly in scope variable angularjs

问题描述

这是类别2的firebase结构。

要在屏幕上显示数据，我希望以这种格式填充$ scope.Categories []。
$ b

  [{
 id：1，
display_with：7，
image：/images/salt_sugar.png，
name：Salt& Sugar ，
subcategories：[{
scid：1，
scname：Sugar Products
}，
 
 {
scid：5，
scname：Tea
} 
 
] 
}，
 
。 
。 
。 
。 
 
 
 
 
 
 $ p $逻辑用于填充$ scope.Categories [ ]。
 
 
  $ scope.Categories = []; 
 var categoriesRef = firebase.database（）。ref（'categories2'）; 
 $ b categoriesRef.on（'value'，function（snapshot）{
 $ scope.Categories = []; 
 
 var recvCategories = []; $ b $ （var j = 0; j  
 var category = recvCategories [j] bv recvCategories = snapshot.val（）; 
 
 ; 
 // 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 =（）; 
 
（var category in category.subcategories）{
 var subcategoriesRef = firebase.database（）。ref（'subcategories2 /'+ key）; 
 subcategoriesRef .on（'value'，function（snapshot2）{
 subcategories.push（snapshot2.val（））; 
}）; 
} 
 
 category_modified.subcategories =子类别; 
 $ scope.Categories.push（category_modified）; 
} 
} 
 $ scope。$ apply（）; 
}）; 
  
只要数据在屏幕上显示，所以我使用$ scope。$ apply（）;  
 
 
问题是数据显示不正确。但一旦我去其他控制器，并返回到相同的控制器，一切都显示为预期。
 
为什么子类别信息不正确地添加在$ scope.Categories [] 
解决方案
我只是修改你的小提琴。只需检查以下链接 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 = []; 
（var category in category.subcategories）{
 var data = _.filter（subcate gories，{'scid'：key}）; 
 _subcategories.push（data [0]）; 
} 
 category_modified.subcategories = _subcategories; 
 Categories.push（category_modified）; 
} 
}）; 
 console.log（Categories）; 
}）; 
 
}）; 
}`
  
 
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[]
解决方案
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);
      });

    });
  }`


                        
这篇关于Firebase实时数据未能在范围变量angularjs中正确添加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！