Render Nearby places according to the database location and userlocation


#1

Hello,

I would like to get nearby location according to the userlocation and foodlocation. I followed



Currenlty I am able to get the difference between miles. But something is
being wrong in the loop. For each food Item, I am getting same mile which should not happen.
I might be doing some silly loop mistake. I am newbie to Ionic.
Here is the code
food.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase';

/*
  Generated class for the FoodProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class FoodProvider {
 public count: any;
  public setLat: number = 26.453972;
  public setLng: number = 87.273024;

  constructor(public http: Http) {
    console.log('Hello FoodProvider Provider');
  }


  // REnder Food by categroy
  renderFoodsByCategory(category): Observable<any> {

    return new Observable(observer => {
      let foods: any = [];
      firebase.database().ref(`foods`).orderByChild("category").equalTo(category)
        .on("child_added", (food) => {
          // console.log(food);
          foods.push({
            id: food.key,
            title: food.val().title,
            category: food.val().category,
            image: food.val().image,
            price: food.val().price,
            description: food.val().description,
            lat: food.val().lat,
            lng: food.val().lng,
            userId: food.val().userId
          });

          foods = this.applyHaversine(foods);
          // console.log(foods);
          observer.next(foods);
          observer.complete();
        },
          (error) => {
            console.log("Observer error: ", error);
            console.dir(error);
            observer.error(error)
          });

    });

  }



  applyHaversine(foods) {
    let userData = [];
    Object.keys(foods).forEach(function (key) {
      userData.push(foods[key]);
    });


    foods.forEach(element => {
      let usersLocation = {
        lat: this.setLat,
        lng: this.setLng
      };

      foods.map((location) => {

        let placeLocation = {
          lat: element.lat,
          lng: element.lng
        };
        console.log(placeLocation);

        location.distance = this.getDistanceBetweenPoints(
          usersLocation,
          placeLocation,
          'miles'
        ).toFixed(2);
      });

    });
      return foods;

  }

  getDistanceBetweenPoints(start, end, units) {

    let earthRadius = {
      miles: 3958.8,
      km: 6371
    };

    let R = earthRadius[units || 'miles'];
    let lat1 = start.lat;
    let lon1 = start.lng;
    let lat2 = end.lat;
    let lon2 = end.lng;

    let dLat = this.toRad((lat2 - lat1));
    let dLon = this.toRad((lon2 - lon1));
    let a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
      Math.cos(this.toRad(lat1)) * Math.cos(this.toRad(lat2)) *
      Math.sin(dLon / 2) *
      Math.sin(dLon / 2);
    let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    let d = R * c;

    return d;

  }

  toRad(x) {
    return x * Math.PI / 180;
  }

}

Please help. Thanks