Using ng-grid with angularFire - key naming issues

Question

I've played around with this a bit now, but can't get my head around it: (Using angular 1.2.2, angularFire 0.5.0 and latest ng-grid) So I have a firebase and I'm using angularFire to extract my data into an ng-grid component like this: ``` //First I go get my data, in this case something called 'grades' from ..../db/grades var promise = angularFire(new Firebase($scope.fireBaseUrl), $scope, 'grades'); //When they're fetched I start up a watcher promise.then(function(grades) { startWatchGrade($scope, filterFilter, appSettings); }); //Then I bind that grades as a datasource to my ng-grid $scope.gridOptions = { data: 'grades', enableCellSelection: false, enableRowSelection: true, etc...., ``` Works great and I've done controls that add new items to 'grades' (push) and remove items (splice) and everything gets reflected to the ng-grid quite nicely. Like so: ``` //Adding new like this is ok $scope.grades.push({some-new-data-here}); //Deleting old like this is ok $scope.grades.splice(row.row…

Accepted Answer

As per the documentation, $firebase always returns objects, not arrays, which don't work so well with ng-grid. In this case, angularfire provides a filter to help, orderByPriority. Make sure to inject $filter into your controller.

(Note: I did not use promises or watchers, only the built in events with angularfire)

```
$scope.grades = $firebase(new Firebase($scope.fireBaseUrl));
$scope.gradesData=[];
$scope.gridOptions = { data: 'gradesData'}
$scope.grades.$on("loaded", function(data) {
    var arrData = $filter("orderByPriority")(data);
    $scope.$apply(function(){$scope.gradesData = arrData;});
});
```

You can try a similar approach for $on.('change'...) for new rows.

hope that helps

Using ng-grid with angularFire - key naming issues

Solution

Problem