如何使用过滤器获取数组的属性答案

【问题标题】：How to get the property of an array using filter如何使用过滤器获取数组的属性
【发布时间】：2021-10-26 19:32:41
【问题描述】：

我正在尝试从以下数组中获取匹配项，比较浏览器中的坐标与数组上的坐标，但是当我调用 const 'matchgeosucursal' 时，即使我强制条件，我也会得到一个 'undefined' 值要匹配的过滤器，这段代码的目的是获取匹配场景的URL，我认为我使用过滤器功能错误。

//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);

       
 }

});

【问题讨论】：

navlat 和navlon 的实际值是多少？
是的，我想通了，但是这些变量的实际值是多少（例如，多少）。如果没有匹配的结果将是一个空数组。
它的变量，我用的是隐私测试值，应该是浏览器请求的lattitude(navlat)和longitud(navlon)，应该匹配最后一个场景：lat: 21.0335386, lon ：-89.559187。
Works fine if I put sensible values.
另外，我想你应该返回 matchgeosucursal，而不是仅仅记录它。

标签： javascript filter geolocation

【解决方案1】：

它工作正常，唯一的问题是console.log 不能正确打印对象。我在测试中使用了console.table ，一切看起来都不错：

注意：我将position 设为常量，因为我无法像您所做的那样从文档中提取坐标。但只要它具有正确的 position.coords.latitude 和 ...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)

【讨论】：

嗯，这很可能是因为您在此示例中硬编码了数组sucursales 中的确切坐标。我认为您想检查position 是否足够接近 sucursales 之一，而不是完全相等。 This page 有一个方便的图表，告诉您 1/10、1/100、1/1000 度数的变化对应的实际距离。您可能会决定，如果一个人在您的纬度/经度坐标的 100m 范围内，那么他们就在“surcursal”中。
我只对原始问题所有者在 cmets 中给出的值进行硬编码。他没有提到他想要在一个范围内匹配。
对不起安舒，不知为何我以为是你的问题。
詹姆斯不用担心！

【解决方案2】：

您可能会得到未定义的结果，因为您的过滤器正在寻找精确匹配的纬度和经度，而用户的地理位置不够准确，无法精确定位您过滤的确切纬度和经度。

要获得匹配，您可以检查用户的纬度和经度是否在一个范围内，如下所示：

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

这将使您在大约半英里范围内获得准确度。显然，您可以根据用例的需要调整想要使用的范围的宽度。

//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);


    }

});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：