Fetch list of restaurants in user's proximity using Firebase-GeoFire

Question

I have a list of restaurants each of which has a fixed location which is stored in GeoFire. Now I want to display the restaurants within a fixed radius of user location. How can I achieve this using GeoFire. The documentation here, https://github.com/firebase/geofire-js/blob/master/docs/reference.md#geofiresetkeyorlocations-location mostly suggests solutions in which geofire 'keys' are moving which are handled using key_entered, key_exited etc. But I'm not able to figure out how to access the keys in proximity.

My controller code looks like:

var ref = firebase.database().ref();
var geoFire = new GeoFire(ref.child("geofire"));
var posOptions = {timeout: 10000, enableHighAccuracy: false};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
$scope.rest= [];
$scope.filteredRest = [];
var geoQuery = geoFire.query({
  center: [position.coords.latitude,  position.coords.longitude],
  radius: 15
});
geoQuery.on("key_entered", function(key, location, distance) {
  console.log(key);
  $scope.filteredRest.push(key);
});
geoQuery.on("ready", function() {
  geoQuery.cancel();
});
console.log($scope.filteredRest);

The key is printed on console but is not pushed to filteredRest array.

I'm looking to achieve 'Example usage' in following link: https://github.com/firebase/geofire-java#example-usage

There are similar questions but most of them are in ios/swift and the answers are not very informative. I'm using GeoFire-JavaScript. Any help would be appreciated.

Answer 1

To handle when all the initial keys are synchronized, put the code into the ready handler. For example, say you want to print all the initial keys:

var ref = firebase.database().ref();
var geoFire = new GeoFire(ref.child("geofire"));
var posOptions = {timeout: 10000, enableHighAccuracy: false};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
$scope.rest= [];
$scope.filteredRest = [];
var geoQuery = geoFire.query({
  center: [position.coords.latitude,  position.coords.longitude],
  radius: 15
});
geoQuery.on("key_entered", function(key, location, distance) {
  $scope.filteredRest.push(key);
});
geoQuery.on("ready", function() {
  geoQuery.cancel();
  console.log($scope.filteredRest);
});