Filter JSON results by multiple criteria

Question

I'm creating a Google Maps filter, and I want to get locations from my JSON with multiple criteria and in future add more filter fields, to allow searching for locations in my map.

I created a test Fiddle for getting all locations, but in topics found only one specific criteria, to search for.

Now it works only with country, but I wanted to make to search with all filter fields.

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>

Here's my JSFiddle

@NegiRox that it filters by multiple criteria, for example, city and name — eatmailyo, Mar 04 '19 at 19:48
You're not filtering JSON (which is a string format); you're filtering objects in an array. If you search for "filtering array of objects by multiple properties" you'll likely find the answer. — Heretic Monkey, Mar 04 '19 at 19:55

score 0 · Accepted Answer · answered Mar 04 '19 at 21:12

0

from comments on my post, I found solution for my problem. after marker array push and filter form submit, filters my markers by this code

where
markers is pushed markers from JSON
filter is formObj from fiddle

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

answered Mar 04 '19 at 21:12

eatmailyo

670
1
12
33

1

or `markers.filter(x => x.property === ...)` – Train Mar 04 '19 at 21:15

Filter JSON results by multiple criteria

1 Answers1