按多个条件过滤 JSON 结果 [重复]答案

【问题标题】：Filter JSON results by multiple criteria [duplicate]按多个条件过滤 JSON 结果 [重复]
【发布时间】：2019-07-25 17:10:48
【问题描述】：

我正在创建一个谷歌地图过滤器，我想从我的 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

【问题讨论】：

您的具体要求是什么？
@NegiRox 它按多个条件过滤，例如城市和名称
您没有过滤 JSON（这是一种字符串格式）；您正在过滤数组中的对象。如果您搜索“通过多个属性过滤对象数组”，您可能会找到答案。

标签： javascript jquery json google-maps filter

【解决方案1】：

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

其中
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);

【讨论】：

或markers.filter(x => x.property === ...)