java - 如何使用 html 从 JSON 文件中选择数据

Question

我有一个问题，我不知道如何从 JSON 文件中选择 html 中的特定数据。html 文件对 json 使用 xhttp，然后解析数据。目前我可以在表格中显示页面上 json 中的所有信息，如下所示。有没有一种方法可以制作一个 html 菜单或下拉框，我可以从所有数据中选择某些日期，或者制作几个不同的过滤器并以某种方式过滤数据？

我试图只能选择某些比赛日，如图像 2，但我希望能够添加我想看到的选项，如按团队或日期过滤这可能吗？任何帮助表示感谢

html

json文件中的数据

标签： javahtmlcssjson

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”的比赛只是像这样过滤结果的轮数数组

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;      

  }  
};