[英]How to select data from a JSON file using html
I have an issue where I dont know how to select specific data in html from a JSON file.我有一个问题,我不知道如何从 JSON 文件中选择 html 中的特定数据。 The html file uses a xhttp for the json and then parses the data.
html 文件对 json 使用 xhttp,然后解析数据。 Currently i can display all the information from the json on the page in a table as shown below.
目前,我可以在表格中显示页面上 json 中的所有信息,如下所示。 Is there a way I can make a html menu or dropdown box that i can select certain days from all the data or make a couple of different filters and filter the data in a certain way ?
有没有一种方法可以制作一个 html 菜单或下拉框,我可以从所有数据中选择特定日期,或者制作几个不同的过滤器并以某种方式过滤数据?
I am trying to just be able to select certain matchdays like image 2 but i want to be able to add options on what i want to see like filter by team or day is this possible ?我试图只能够选择某些比赛日,如图片 2,但我希望能够添加我想看到的选项,例如按团队或日期过滤,这可能吗? any help is appreciated thanks
任何帮助表示赞赏谢谢
You can use the jquery function filter ( http://api.jquery.com/filter/ ) or grep ( http://api.jquery.com/jquery.grep/ ).您可以使用 jquery 函数过滤器 ( http://api.jquery.com/filter/ ) 或 grep ( http://api.jquery.com/jquery.grep/ )。 I'll provide a working example tomorrow as I am using my smartphone now.
明天我将提供一个工作示例,因为我现在正在使用我的智能手机。 Take a look at this example with javascript: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_filter .
用 javascript 看看这个例子: https : //www.w3schools.com/jsref/tryit.asp? filename =tryjsref_filter 。
Here is how you can do it: to have just the matches of "Matchday 1" just filter the rounds array of the results like so以下是您的操作方法:只需要“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;
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.