How to get the property of an array using filter-CodePudding

I'm trying to get the match from the following array comparing the coordinates from the browser vs the coordinates on the array, but I get an 'undefined' value when I call the const 'matchgeosucursal' even if I force the condition of the filter to match, the goal of this code is to get the URL of the matching scenario, I think I'm using the filter function wrong.

//Request permissions
$( document ).ready(function getLocation() {
  
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
      console.log ("Geolocation is not supported by this browser.");
    }

    
//Filter and gets match url

function showPosition(position) {  
  console.log("Latitude: "   position.coords.latitude)
  console.log("Longitude: "   position.coords.longitude);
  var navlat = position.coords.latitude; //Browser lat
  var navlon = position.coords.longitude; // Browser lon

  // Array
  var sucursales = [
    {lat: 21.924089, lon: -102.293378, url: "https://shorturl.at/test1"},
    {lat: 21.859964, lon: -102.298034, url: "https://shorturl.at/test2"},
    {lat: 32.45569, lon: -116.836181,  url: "https://shorturl.at/test3"},
    {lat: 24.114868, lon: -110.340389, url: "https://shorturl.at/test4"},
    {lat: 21.0335386, lon: -89.559187, url: "https://shorturl.at/test5"}];
  
//Match result
  const matchgeosucursal = sucursales.filter( sucursales =>  sucursales.lat === navlat && sucursales.lon === navlon);
  console.log('Match> '   matchgeosucursal);

       
 }

});

CodePudding user response：

Its working fine, the only thing is that console.log doesn't print objects properly. I used console.table in my test and everything looks good:

Note: I made position a const because I can't pull the coordinates from a document like you have done. But it will work as long as it has correct values for position.coords.latitude and ...longitude

const position = {
  coords: {
    latitude: 21.0335386,
    longitude: -89.559187,
  }
}

function showPosition(position) {
  console.log("Latitude: "   position.coords.latitude)
  console.log("Longitude: "   position.coords.longitude);
  var navlat = position.coords.latitude; //Browser lat
  var navlon = position.coords.longitude; // Browser lon

  // Array
  var sucursales = [
    {lat: 21.924089, lon: -102.293378, url: "https://shorturl.at/test1"},
    {lat: 21.859964, lon: -102.298034, url: "https://shorturl.at/test2"},
    {lat: 32.45569, lon: -116.836181,  url: "https://shorturl.at/test3"},
    {lat: 24.114868, lon: -110.340389, url: "https://shorturl.at/test4"},
    {lat: 21.0335386, lon: -89.559187, url: "https://shorturl.at/test5"}];

//Match result
  const matchgeosucursal = sucursales.filter( sucursales =>  sucursales.lat === navlat && sucursales.lon === navlon);
  console.log("Match:")
  console.table( matchgeosucursal);


 }


showPosition(position)

CodePudding user response：

It is likely that you are getting an undefined result because your filter is looking for an exact match for latitude and longitude, and the user's geolocation isn't accurate enough to pinpoint the exact latitude and longitude that you are filtering for.

To get a match, you could check if the user's latitude and longitude are within a range, like so:

const matchgeosucursal = sucursales.filter( sucursales =>
            sucursales.lat >= (navlat -.005) &&
            sucursales.lat <= (navlat  .005) &&
            sucursales.lon >= (navlon -.005) &&
            sucursales.lon <= (navlon  .005));

That would give you accuracy within about a half of a mile. Obviously, you can adjust how wide of a range you would like to use, as needed for your use case.

//Request permissions
$( document ).ready(function getLocation() {

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        console.log ("Geolocation is not supported by this browser.");
    }


//Filter and gets match url

    function showPosition(position) {
        console.log("Latitude: "   position.coords.latitude)
        console.log("Longitude: "   position.coords.longitude);
        var navlat = position.coords.latitude; //Browser lat
        var navlon = position.coords.longitude; // Browser lon

        // Array
        var sucursales = [
            {lat: 21.924089, lon: -102.293378, url: "https://shorturl.at/test1"},
            {lat: 21.859964, lon: -102.298034, url: "https://shorturl.at/test2"},
            {lat: 32.45569, lon: -116.836181,  url: "https://shorturl.at/test3"},
            {lat: 24.114868, lon: -110.340389, url: "https://shorturl.at/test4"},
            {lat: 21.0335386, lon: -89.559187, url: "https://shorturl.at/test5"}];

//Match result
        const matchgeosucursal = sucursales.filter( sucursales =>
            sucursales.lat >= (navlat -.005) &&
            sucursales.lat <= (navlat  .005) &&
            sucursales.lon >= (navlon -.005) &&
            sucursales.lon <= (navlon  .005));
        
        console.log('Match > \nlat: '   matchgeosucursal[0].lat  "\nlon: "   matchgeosucursal[0].lon   "\nurl: "   matchgeosucursal[0].url);


    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>