(ES6) Фильтр поиска с <option>выбранными атрибутами

Question

У меня есть этот файл JSON:

{
  "clubs":  [
    {
    "name": "Feyenoord Rotterdam",
    "origin": "Zuid-Holland",
    "championships": "15 Titles",
    "image": "https://goso.gl/images/Dgu743"
    },
    {
      "name": "Sparta Rotterdam",
      "origin": "Zuid-Holland",
      "championships": "6 Titles",
      "image": "https://goso.gl/images/Dgu744"
    },
    {
      "name": "AZ Alkmaar",
      "origin": "Noord-Holland",
      "championships": "2 Titles",
      "image": "https://goso.gl/images/Dgu745"
    },
    {
      "name": "Willem II",
      "origin": "Noord-Brabant",
      "championships": "3 Titles",
      "image": "https://goso.gl/images/Dgu746"
    },
    {
      "name": "PSV Eindhoven",
      "origin": "Noord-Brabant",
      "championships": "24 Titles",
      "image": "https://goso.gl/images/Dgu747"
    }
  ]
}

Я хочу создать форму, чтобы вы могли фильтровать клубы по происхождению.У меня есть этот HTML-код:

<form class="search-origin">
  <select name="Search club from origin">
    <option value="zuid-holland">Zuid-Holland</option>
    <option value="noord-holland">Noord-Brabant</option>
    <option value="noord-brabant">Noord-Holland</option>
  </select>
</form>

Так что, если вы выберете "Zuid-Holland", будут видны только клубы "Feyenoord Rotterdam" и "Sparta Rotterdam".

Я могу заставить его работать с кнопками, но я действительно хочу, чтобы он работал с формой и ES6.

Answer 1

const clubs = [{
    "name": "Feyenoord Rotterdam",
    "origin": "Zuid-Holland",
    "championships": "15 Titles",
    "image": "https://goso.gl/images/Dgu743"
  },
  {
    "name": "Sparta Rotterdam",
    "origin": "Zuid-Holland",
    "championships": "6 Titles",
    "image": "https://goso.gl/images/Dgu744"
  },
  {
    "name": "AZ Alkmaar",
    "origin": "Noord-Holland",
    "championships": "2 Titles",
    "image": "https://goso.gl/images/Dgu745"
  },
  {
    "name": "Willem II",
    "origin": "Noord-Brabant",
    "championships": "3 Titles",
    "image": "https://goso.gl/images/Dgu746"
  },
  {
    "name": "PSV Eindhoven",
    "origin": "Noord-Brabant",
    "championships": "24 Titles",
    "image": "https://goso.gl/images/Dgu747"
  }
];

function filter(event) {
 const e = document.getElementById('clubs-select');
 const region = e.options[e.selectedIndex].value;
 const d = document.getElementById('possible-clubs');
 d.innerHTML = JSON.stringify(clubs.filter(function(club) {
  return club.origin.toLowerCase() === region;
 }));
}

<form class="search-origin">
  <select name="Search club from origin" id="clubs-select" onChange="filter();">
    <option value="">----</option>
    <option value="zuid-holland">Zuid-Holland</option>
    <option value="noord-holland">Noord-Brabant</option>
    <option value="noord-brabant">Noord-Holland</option>
  </select>
</form>

<div id="possible-clubs"></div>

Answer 2

Вы должны просто использовать Array#filter() примерно так:

let data = {"clubs":[{"name":"Feyenoord Rotterdam","origin":"Zuid-Holland","championships":"15 Titles","image":"https://goso.gl/images/Dgu743"},{"name":"Sparta Rotterdam","origin":"Zuid-Holland","championships":"6 Titles","image":"https://goso.gl/images/Dgu744"},{"name":"AZ Alkmaar","origin":"Noord-Holland","championships":"2 Titles","image":"https://goso.gl/images/Dgu745"},{"name":"Willem II","origin":"Noord-Brabant","championships":"3 Titles","image":"https://goso.gl/images/Dgu746"},{"name":"PSV Eindhoven","origin":"Noord-Brabant","championships":"24 Titles","image":"https://goso.gl/images/Dgu747"}]};

document.querySelector(".search-origin").addEventListener("change", e => {
  let val = e.target.value; //get the value from the form
  console.log(val);
  let searched = data.clubs.filter(d => d.origin.toLowerCase() === val);
  display(searched);
});

function display(data) {
  /** Display the data somehow **/
  console.log(data);
}

<form class="search-origin">
<select name="Search club from origin">
<option value="zuid-holland">Zuid-Holland</option>
<option value="noord-holland">Noord-Holland</option>
<option value="noord-brabant">Noord-Brabant</option>
</select>
</form>