Retrieve data from file on local machine

Question

I have an html file with just a table, containing 5 cells in a single row, displaying 5 NFL teams. The td's ids are "Team0" to "Team4" (left to right).
My purpose is to move a double clicked team to the last position in the right (to the cell wich id is "Team4").
In every td I have a call to Rearrange_Teams(iPosition).
iPosition is the number in the td id (Team3 calls Rearrange_Teams(3).

The following code works fine, but I'd like to change the function Load_Teams(), in order to load the teams from a file in my desktop (where my html file is saved):

<script>
    Array.prototype.Rearrange = function(from,to){
        this.splice(to,0,this.splice(from,1)[0]);
        return this;
    };

    var aTeams = [];
    Load_Teams();
    List_Teams();

    function Load_Teams() {
        aTeams [0] = "PANTHERS";
        aTeams [1] = "CARDINALS";
        aTeams [2] = "BENGALS";
        aTeams [3] = "BRONCOS";
        aTeams [4] = "PATRIOTS";
    }

    function List_Teams() {
        document.getElementById("Team0").innerHTML = aTeams [0];
        document.getElementById("Team1").innerHTML = aTeams [1];
        document.getElementById("Team2").innerHTML = aTeams [2];
        document.getElementById("Team3").innerHTML = aTeams [3];
        document.getElementById("Team4").innerHTML = aTeams [4];
    }

    function Rearrange_Teams(iPosition_Clicked) {
        aTeams.Rearrange(iPosition_Clicked,4);
        List_Teams();
    }
</script>

Both the html page and the data file (JSON? txt?) are supposed to be saved in my computer (desktop or user directory, whatever...). I just can't find an answer to help me with this... well, at least I can't understand the changes I'd have to make in the codes I've seen around...

The idea is to save the changes in the list, so I have to load the previous configuration and save the actual ones...
It's not possible to set up a local webserver, as I was suggested before, cause the intention is to use this page at my work and the users don't have administrator privileges (myself included).
We currently use an Excel worksheet with VBA, to get the job done, but I want to change it to the browser.

EDITED AFTER REPLY:
I've tried:

function Load_Teams() {
    var actual_JSON;
    loadJSON("My_File_with_Data.json", function(response) {
        actual_JSON = JSON.parse(response);
    });
    alert(actual_JSON);
}

function loadJSON(filename, callback) {   
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', filename, true);
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);
        }
    };
    xobj.send(null);  
}

But nothing happened... The alert(actual_JSON) shows nothing (just a blank pop up, with an "ok"). And I have no idea how I should pass the content of actual_JSON (does it really have any???) to aTeams.
The file My_File_with_Data.json looks like this:

{"jTeams": ["PANTHERS","CARDINALS", "BENGALS", "BRONCOS", "PATRIOTS"]}

NEW APPROACH:

    var aTeam = [];
    readTextFile();
    List_Teams();

    function readTextFile(){
        var rawFile = new XMLHttpRequest();
        rawFile.open("GET", "Teams.txt", true);
        rawFile.onreadystatechange = function (){
            if(rawFile.readyState === 4){
                var  allText = rawFile.responseText;
                aTeam = allText.split("/");
                alert(aTeam[4]);
            }
        }
        rawFile.send();
    }

    function List_Teams() {
        document.getElementById("Team0").innerHTML = aTeam[0];
        document.getElementById("Team1").innerHTML = aTeam[1];
        document.getElementById("Team2").innerHTML = aTeam[2];
        document.getElementById("Team3").innerHTML = aTeam[3];
        document.getElementById("Team4").innerHTML = aTeam[4];
    }

The file Teams.txt looks like: PANTHERS/CARDINALS/BENGALS/BRONCOS/PATRIOTS

When readTextFile() runs, the alert(aTeam[4]) displays PATRIOTS. But List_Teams() fills my table with undefined.
How come??? Seems to be a matter of scope, but aTeam is a global!...

Answer 1

A slightly modified version of code from this blog post, here is a function you can use to load JSON:

function loadJSON(filename, callback) {   
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', filename, true);
  xobj.onreadystatechange = function () {
    if (xobj.readyState == 4 && xobj.status == "200") {
      // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
      callback(xobj.responseText);
    }
  };
  xobj.send(null);  
}

to use this function, you need a callback:

var actual_JSON;
loadJSON("localhost:8000/my-file", function(response) {
  // Parse JSON string into object
  actual_JSON = JSON.parse(response);
});
alert(actual_JSON);

replace /my-file with a path to your file.

You also need a server at the location, which you can set up quickly like this