如何使用 html 從 JSON 文件中選擇數據

Question

我有一個問題，我不知道如何從 JSON 文件中選擇 html 中的特定數據。 html 文件對 json 使用 xhttp，然后解析數據。 目前，我可以在表格中顯示頁面上 json 中的所有信息，如下所示。 有沒有一種方法可以制作一個 html 菜單或下拉框，我可以從所有數據中選擇特定日期，或者制作幾個不同的過濾器並以某種方式過濾數據？

我試圖只能夠選擇某些比賽日，如圖片 2，但我希望能夠添加我想看到的選項，例如按團隊或日期過濾，這可能嗎？ 任何幫助表示贊賞謝謝

html

json文件中的數據

Answer 1

您可以使用 jquery 函數過濾器 ( http://api.jquery.com/filter/ ) 或 grep ( http://api.jquery.com/jquery.grep/ )。 明天我將提供一個工作示例，因為我現在正在使用我的智能手機。 用 javascript 看看這個例子： https : //www.w3schools.com/jsref/tryit.asp? filename =tryjsref_filter 。

以下是您的操作方法：只需要“Matchday 1”的匹配項，只需過濾結果的 rounds 數組，就像這樣

xhttp.onreadystatechange = function() {
  if(this.readyState == 4 && this.status == 200) {
    var peopleTxt = this.responseText;
    peopleObj = JSON.parse(peopleTxt); //.filter();

    peopleObj.rounds = peopleObj.rounds.filter(a=>a.name=="Matchday 1");
    html = Mustache.to_html(tp, peopleObj);
    document.getElementById("demo").innerHTML = html;      

  }  
};