按多个条件过滤 JSON 结果

debugcn 发表于 Dev

丹尼尔·吉尔根森斯

我正在创建一个谷歌地图过滤器，我想从我的 JSON 中获取具有多个条件的位置，并在将来添加更多过滤器字段，以允许在我的地图中搜索位置。

我创建了一个测试 Fiddle 来获取所有位置，但在主题中只找到了一个特定的条件来搜索。

现在它仅适用于国家/地区，但我想使用所有过滤器字段进行搜索。

var JSON = "https://raw.githubusercontent.com/rhcarlosweb/google-maps-multi-filter-jquery/master/stores.json";

$.getJSON(JSON, function(stores) {
  $.each(stores, function(i, store) {
    var title = store.name;
    var country = store.location.country.name;
    var city = store.location.city.name;
    var district = store.location.district.name;
    var type = store.type.name;

    $("#results").append(title + "<br>" + country + "<br>" + city + "<br>" + district + "<br>" + type + "<br><br>");
  });
});

$("#filter").click(function() {
  $("#results").text("");

  var formObj = {};
  var inputs = $('#mapFilter').serializeArray();
  $.each(inputs, function(i, input) {
    if (input.value != "") {
      formObj[input.name] = input.value;
    }
  });
  if (Object.getOwnPropertyNames(formObj).length !== 0) {
    getJSON(formObj);
  }
});

function getJSON(values) {
  var city = values.filter_country;
  console.log(city);

  $.getJSON(JSON, function(stores) {
    $.each(stores, function(i, store) {
      if (store.location.country.name == city) {
        var title = store.name;
        $("#results").append(title + "<br><br>");
        return;
      }
    });
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Filter
<form id="mapFilter">
  <input type="text" name="filter_key" id="keyword" />
  <select name="filter_country">
    <option>Brasil</option>
    <option>Estados Unidos</option>
  </select>
  <select name="filter_city">
    <option>Dighton</option>
    <option>Goiânia</option>
    <option>Nova Friburgo</option>
    <option>Petrópolis</option>
    <option>Fortaleza</option>
  </select>
  <input type="text" name="filter_district" id="district" />
</form>
<button id="filter">Filter</button>

<br /><br /> Locations
<div id="results"></div>

这是我的JSFiddle

丹尼尔·吉尔根森斯

从我帖子的评论中，我找到了解决我的问题的方法。在标记数组推送和过滤表单提交后，通过此代码过滤我的标记

其中，
markers推标志从JSON
filter是formObj从小提琴

locations = markers.filter(function(item) {
  for (var key in filter) {
    if (item[key] === undefined || item[key] != filter[key])
    return false;
  }
  return true;
});

console.log(locations);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。