I am currently working on a Javascript application where I aim to gather football/soccer statistics from football-data.org and display specific information on my HTML Page.
Despite my efforts to retrieve the data, I am facing challenges in making an AJAX call to fetch it.
$(function (){
var $players = $('#players');
$.ajax({
headers: { 'X-Auth-Token': 'MYAPITOKEN....' },
type: 'GET',
url: 'https://api.football-data.org/v2/competitions/PD/scorers',
dataType: 'json',
success: function(players) {
$.each(players, function(i, player){
$players.append('<li>name: '+ player[3] +', position: '+player.nationality+'</li>');
});
}
});
});
My objective is to display the player's name and position on the HTML page, but what I currently see is:
name: undefined, position: undefined
name: undefined, position: undefined
name: undefined, position: undefined
name: undefined, position: undefined
name: [object Object], position: undefined
Upon checking the console log, the following message is displayed: Console log Api call