How to retrieve nested data with Angularjs ng-repeat in Firebase?

Question

I am seriously having a hard time retrieving nested data from Firebase with AngularJS. I try to save data this way in Firebase, btw I am using Angularfire to save and retrieve data from the database. How can I retrieve the value of foo with ng-repeat? I also find that the documentations is scarce and tutorials are outdated. I like the real time updates and that is why I want to use it. There are no errors in the console btw. Thanks in advance for any suggestions.

 --Unique id   
      --0
         --foo:"bar"   
      --1
         --foo:"bar"

Now when I do this in my HTML it gives me back the index number:

<div ng-repeat="(item, id) in list">
    <span>{{item}}</span><button ng-click="remove(id)">x</button>
    </div>
</div>

But when I do this, it does not give me the values of foo:

<div ng-repeat="(item, id) in list">
    <span>{{item.foo}}</span><button ng-click="remove(id)">x</button>
    </div>
</div>

Javascript

angular.module("app", ['firebase'])
    .controller("ctrl", function ($firebase, $scope) {

    var ref = new Firebase('https://testing12344.firebaseio.com/');
    var x=[{foo:"bar"}, {foo:"bar"}];
    var sync = $firebase(ref);
    var list = sync.$asArray();
    list.$add(x);

    $scope.list = list;
        console.log($scope.list);
    $scope.remove = function (id){
        list.$remove(id);
        }   

    })

"I also find that the ... tutorials are outdated" If you were to provide links to those tutorials, that would be a more constructive statement. — Frank van Puffelen
– Frank van Puffelen, Commented Jan 30, 2015 at 15:47
From a quick inspection of your data, it seems that you are nesting. Note that this is not really recommended with Firebase: firebase.com/docs/web/guide/structuring-data.html — Frank van Puffelen
– Frank van Puffelen, Commented Jan 30, 2015 at 15:50
@Mikey see my sample application it"s useful for how to delete and update in firebase using angularjs Demo — User_3535
– User_3535, Commented Sep 27, 2015 at 17:17

Frank van Puffelen · Accepted Answer · 2015-01-30 16:05:39Z

3

As I already commented: Firebase's documentation recommends against building nested data structures; partially because of the reason you encounter. The only time I find myself nesting data structures like this, is when a user is typically "inside" one of these top-level children. In that case the outermost ID is part of the context and I won't need a nested loop, like you do.

That said, you can easily make your code/view work if you ensure it matches the data structure correctly. Since you have a collection (with children 0 and 1) inside a collection (with the generated IDs), you'll need to ng-repeats to reach foo:

    <ol>
        <li ng-repeat="item in list">
            {{item.$id}}
            <ol>
                <li ng-repeat="child in item">{{child}}</li>
            </ol>
        </li>
    </ol>

A snippet from the output:

1. -Jgv9EmOXmXYNrYPG8jK
    1. {"foo":"bar"}
    2. {"foo":"bar"}
2. -Jgv9GEXJLnaQmYeYR2u
    1. {"foo":"bar"}
    2. {"foo":"bar"}
3. -JgvHQ1YJsgF9THdfmd7
    1. {"foo":"bar"}
    2. {"foo":"bar"}

I also noticed that you're logging console.log($scope.list);, which is a common mistake. By the time that console.log statement executed, the data may not have been loaded from Firebase's servers yet. Sometimes it shows up correctly in your browser's JavaScript console, but sometimes it doesn't.

The proper way to log the data once it is loaded is:

list.$loaded().then(function(list) { 
    console.log('Initial child count', list.length); 
    console.log(list[0][0].foo); 
});

Note that $loaded will only trigger for the initially downloaded data, not for subsequent updates. If you care about those, you should look into AngularFire's $watch. But to be honest: you should normally not have a need for that. Once you bind your AngularFire data to the view correctly, it should update automatically in most use-cases.

answered Jan 30, 2015 at 16:05

Frank van Puffelen

603k85 gold badges896 silver badges869 bronze badges

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

1 Comment

Michelangelo Over a year ago

Hi Frank. Thanks for the help! Great answer. What I meant with outdated tutorials is that there are not a lot of video tutorials around and some of them are from earlier versions. Also, the official documentation is ok and I indeed read about not nesting your data to much but I find it really hard to avoid it. I started only two days ago with AngularFire so it is all new to me...

Collectives™ on Stack Overflow

How to retrieve nested data with Angularjs ng-repeat in Firebase?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related