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

Question

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[]

Can you set up a jsfiddle/jsbin that reproduces the minimal problem? — Frank van Puffelen
– Frank van Puffelen, Commented Aug 21, 2016 at 2:32
@FrankvanPuffelen Please find jsfiddle at jsfiddle.net/py3ofkyc If we hit "click me" button and see logs, all the categories are coming first followed by all subcategories. But what i want is display first category and their subcategories , then display second category and their subcategories and so on.. — Devesh Agrawal
– Devesh Agrawal, Commented Aug 23, 2016 at 13:49

Libu Mathew · Accepted Answer · 2016-08-23 20:51:55Z

1

+50

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);
      });

    });
  }`

edited Aug 23, 2016 at 20:51

answered Aug 23, 2016 at 20:45

Libu Mathew

2,99626 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Devesh Agrawal Over a year ago

This is what i was looking for. Thanks ti2005. This helped me a lot.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related