如何使用 html 从 JSON 文件中选择数据答案

【问题标题】：How to select data from a JSON file using html如何使用 html 从 JSON 文件中选择数据
【发布时间】：2019-04-08 05:22:20
【问题描述】：

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

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

html

data in json file

【问题讨论】：

标签： java html css json

【解决方案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;      

  }  
};

【讨论】：

如果您想获得帮助，请提供一些代码，而不仅仅是屏幕截图。
嗨，Patrick，如果这对您有帮助或者您需要更多帮助，请告诉我。
嗨，Patrick，建议的代码可以在图片中看到，您可以在自己的代码中对其进行测试，那么您为什么不接受呢？如果出于任何原因它对您不起作用，请给我反馈：我花了大约 30 分钟来回答。