How to select data from a JSON file using html

Question

I have an issue where I dont know how to select specific data in html from a JSON file. The html file uses a xhttp for the json and then parses the data. Currently i can display all the information from the json on the page in a table as shown below. 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 ?

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 ? any help is appreciated thanks

html

data in json file

Answer 1

You can use the jquery function filter ( http://api.jquery.com/filter/ ) or 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 .

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

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;      

  }  
};