Alteredorange February 2016

Displaying Special Case Of Sorted Firebase Arrays (with AngularJS)

So basically I have a set of clubs, and a set of users. Each club and each user has a specific latitude and longitude. Showing all clubs to a user is easy with ng-repeat, but I'm trying to just show clubs within a certain distance of each user. So what I've come up with so far:

var arr = [];
$scope.clubs.$loaded().then(function() {
    angular.forEach($scope.clubs, function(value, key) {
       if($scope.getDistance(value.lng, value.lat) == true) {
        console.log(value.name + " it's close enough!");
         arr.push( {id: value.$id, description: value.description, name: value.name});
       }
    });
    console.log(arr);
});
$scope.narr = arr;

Is there a more elegant way to do this? I'm basically singling out data from a firebase array, and then putting it into a smaller array (arr) and then ng-repeating through it. But now it's not a firebase array... Any ideas?

p.s. I don't think I can use any of the built in firebase sorting, because distance is unique for each user, and each location requires a latitude and longitude.

Answers


David East February 2016

Why not evaluate $scope.getDistance() in your template?

You'll only need to create a $firebaseArray() on $scope.

$scope.cabyns = $firebaseArray(ref);

Then in your template you can call $scope.getDistance() with the item in ng-repeat. Using an ng-if direction, you can state whether it should be loaded.

<ul>
  <li ng-repeat="item in cabyns"> 
    <span ng-if="getDistance(item)">
      {{ item.name }}
    <span> 
  </li>
</ul>

Another thing you could try doing is using GeoFire if you're doing geofencing.


Alteredorange February 2016

So i went with GeoFire. It's pretty much the same implementation as above, but should be much better for scaling. If anyone is interested, this is what your GeoFire function would look like:

var array = [];
$scope.publicArray = array;
$scope.geoFunc = function() {
    geoQuery = geoFire.query({
    center: [userData.Latitude, userData.Longitude],
    radius: 25
  });
      geoQuery.on("key_entered", function(key, location, distance) {
    console.log(key + " is located at [" + location + "] which is within the query (" +    distance.toFixed(2) + " km from center)");
    var newRef = new Firebase(furl + "/clubs/" + key);
    $scope.thing = $firebaseObject(newRef);
    array.push($scope.thing);
  });
};

And then you could just ng-repeat through your publicArray.

Post Status

Asked in February 2016
Viewed 1,183 times
Voted 14
Answered 2 times

Search




Leave an answer