如何将特定数据从JSON文件解析到html下拉菜单

Question

JSON FILE

Hi, in the json file i have shown above there is over 30 matchdays and i was wondering how would i be able to parse the data from the JSON file to a html file and have the options in a dropdown menu to be able to filter by matchdays or filter by teams, is it possible to do this or am I overthinking it, i have the file parsing the data and showing all results from the json file into a table as shown below html file showing all matchdays

i was wondering is there a way i can filter these results by specific team or matchdays ? any help appreciated thanks

html file taking in the json data

Answer 1

Below code snippet would help you to finish your work.

var json = '{"name":"EnglishPremierLeague2015","rounds":[{"name":"Matchday1:","matches":[{"date":"2015-08-08","team1":{"key":"manutd","name":"ManchesterUnite","code":"MUN"},"team2":{"key":"tottenham","name":"TottenhamHotspu","code":"TOT"},"scorer":1,"score2":0}]},{"name":"Matchday2:","matches":[{"date":"2015-08-09","team1":{"key":"India","name":"IndianCricketTeam","code":"IND"},"team2":{"key":"England","name":"EnglandCricketTeam","code":"ENG"},"scorer":1,"score2":0}]}]}';

var data = JSON.parse(json);

// Filter by Match Day
var filter = $(data.rounds).filter(function () { 
    return this.name == "Matchday1:";
})

// Test Case :)
if (filter.length == 1) {
    console.log("Filter working")
}

var filterbyTeam = $(data.rounds).filter(function () {
    return this.matches.filter(function (e) {
        return e.team1.key == "India" || e.team2.key == "India";
    }).length >= 1;
})

// Test Case :)
if (filterbyTeam.length == 1) {
    console.log("Filter working")
}

This code will get the JSON array with the filter that you can use further to show your HTML.

Note: You need to pass filter text according to your requirement. You can change the attribute as well to filter specific data.

Hope this will help :)