AJAX Call To JSON File On Local Machine Failed With No Errors
-
I am trying to access a json file on my local machine using XMLHttpRequest when a dropdownlist item is selected but it is not working. Basically when a user clicks a button with an id of GetTeam on my webpage, it will call the DisplayTeams function which will generate a dropdownlist and a div dynamically for displaying players' data. Once the dropdowlist is generated and the user clicks on one of the teams in the dropdownlist, the function DisplayPlayers will call the DisplayPlayersByTeam method to access my json file. It will then call the function RenderPlayersData to render players' data on the PlayersData div if the AJAX call is successful. I have successfully generated the dropdownlist but it appears the AJAX call is not working. Please point out why my code below is not working.
function DisplayTeams(){
var calendar = document.getElementById('DataScreen');
calendar.innerHTML= '';
calendar.innerHTML = '' +
'' +
'Select A Team' +
'Cavaliers' +
'Bulls' +
'Lakers' +
'Warriors' +
'' +
'' + '
'
}function DisplayPlayersByTeam(team){
var ajaxObj = new XMLHttpRequest();ajaxObj.overrideMimeType("application/json");
ajaxObj.open('GET','Teams/PlayersData.json', true);
ajaxObj.onreadystatechange = function(){
if(ajaxObj.readyState == 4 && ajaxObj.status == 200){ var data = JSON.parse(ajaxObj.responseText); RenderPlayersData(team); /\* This function will render players' data if AJAX is successful. \*/ }else{ alert("there is an error"); }
}
ajaxObj.send(null);
}