Powered by GitHub Pages
The website uses Google Analytics to keep track of the Visitors. Take a look at our Privacy Policy for more information.

Introduction

This page explores the JavaScript (JS) implementation details of the JSON data available at the GitHub repository which serves the data for this webiste.
NOTE:
An elemantary knowledge of JavaScript is assumed. The implementation uses methods chaining for code efficiency where needed.

AJAX CALL TO FETCH JSON DATA FILE FROM THE GITHUB REPOSITORY

To fetch JSON file from the repository, XMLHttpRequest object is used to perform AJAX request although fetch API can also be used.
    var data = null;                 //Initiate the data variable to null, sets it in global scope
    var xhr = new XMLHttpRequest();

    xhr.open('GET','https://raw.githubusercontent.com/drraq/PremierLeague.json/master/data.json'); //GET Request to fetch file in plain text format from GitHub
    xhr.send(null);

    xhr.onload = function() {
    data = JSON.parse(this.responseText);

      /* Callback functions come here to process the data
       *  ...
       *  ...
       *  ...
       */
    }
  

Get clubs objects sorted in ascending order of thier position in table

The following function, getAllClubs(), extract all the clubs objects in an array sorted according to thier position in the standing table. The function does not take any argument. data is available through global scope.
    //Function to extract clubs objects sorted according to their positions

    function getAllClubs() {
      var clubs = null;                        //Varialbe to return after loading clubs
      clubs = data.clubs.sort( (a,b) => {
        return a['position'] - b['position'];
      });
    }
  

Get all players who has appeared for their clubs

The following function, getAllPlayers(), extract all the players in an array who has appeared for their respective clubs. The function takes an optional argument default to all. If players of any particular club are required, use the respective 3 letter code for that club. data is available through global scope.
    //Function to extract all players with appearances greater than 0
    //data is in global scope

    function getAllPlayers(code='all') {
      var players = null;                        //Variable to return after loading all players

      if (code === 'all') {
        players = data.players.filter( p => {    //Fat-arrow notation is used for the callback function
          return p['appearances'] >=1;           //Checks only one condition of appearances
        });
      }

      else {
        players = data.players.filter( p => {
          return p['appearances'] >=1 && p['club_code'] === code;    //Check condition of appearances AND club code
        }).sort( (a,b) => {
          return a['jersey_number'] - b['jersey_number'];  //Sort in ascending order of their shirt numbers
        });
      }

      return players;

      /* Possible uses could be */
      // getAllPlayers() to fetch all players who have appeared for their clubs
      // getAllPlayers('WAT') to fetch all Watford players who have appeared for their club
    }
  
Hello!

Do you share the same passion for the English Premier League as we do?
Then why not give writing a chance!
Help us building blog posts for this website.