如何使用 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;      

  }  
};