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

您应该像这样使用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>

Answer 2

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>

（ES6）使用<选项>选择的属性搜索过滤器

2 个答案: