Reading a JSON File using JQUERY within an HTA Application

So I have this HTA Application I'm working on, Which will be used in remote locations where there will be little to no internet. Its should be very basic as in I just want it to load/read a json file and edit/append some fields within the JSON file. If I load it within a web browser by changing the extention to .html it works and reads the json no problem, when I rename it back to .hta and execute its just blank. I dont understand why.

testJSON.hta

<html>

<head>
  <title>TEST - JSON Editor</title>
  <HTA:APPLICATION ID="oHTA" APPLICATIONNAME="TESTJSON" BORDER="thin" BORDERSTYLE="normal" CAPTION="yes"
    ICON="TESTJSON/images/TEST_twit_logo_ijM_icon.ico" MAXIMIZEBUTTON="yes" MINIMIZEBUTTON="yes" SYSMENU="yes"
    SCROLL="no" NAVIGABLE="yes" SINGLEINSTANCE="no" SHOWINTASKBAR="yes" VERSION="1.0" WINDOWSTATE="normal">
    <script>
      window.location = 'testJSON.html';
    </script>
</head>

</html>

testJSON.html

<!DOCTYPE html>
<html>
<head>
    <title>TEST - JSON Editor</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <link rel="stylesheet" href="TESTJSON/css/bootstrap.min.css">
    <link rel="stylesheet" href="TESTJSON/css/style.css">
    <script src="TESTJSON/js/jquery.min.js"></script>
    <script src="TESTJSON/js/bootstrap.min.js"></script>

    <!--Begin Vbscript-->
    <script language="VBScript">
    </script>

</head>

<body onload="readJSON()" scroll="no">
    <div class="logo">
        <img class="logo-image" src="TESTJSON/images/TEST-logo.png">
    </div>

    <div class="container">
        <div class="row">
            Select a JSON file: <input type="file" accept=".json" name="jsonFile"><br><br>
        </div>
    </div>
    <div class="status_window">
        Status / Information:
        <div class="status_window_text" id="output">

        </div>
    </div>
</body>
<!--Begin Jscript-->
<script type="text/javascript">
function readJSON() {
    $(document).ready(function () {
        $.getJSON("example_2.json", function (data) {
            var content = '<h3>' + data.quiz.sport.q1.question + '</h3>';
            $(content).appendTo("#output");

        });
    });
}

function myFunction() {
  alert("Page is loaded");
}

</script>
</html>

example_2.json

{
    "quiz": {
        "sport": {
            "q1": {
                "question": "Which one is correct team name in NBA?",
                "options": [
                    "New York Bulls",
                    "Los Angeles Kings",
                    "Golden State Warriros",
                    "Huston Rocket"
                ],
                "answer": "Huston Rocket"
            }
        },
        "maths": {
            "q1": {
                "question": "5 + 7 = ?",
                "options": [
                    "10",
                    "11",
                    "12",
                    "13"
                ],
                "answer": "12"
            },
            "q2": {
                "question": "12 - 8 = ?",
                "options": [
                    "1",
                    "2",
                    "3",
                    "4"
                ],
                "answer": "4"
            }
        }
    }
}

Solution

Using HTML5 FILE API I was able to get the script working with the code below

This is the query from the JSON I was able to return.

JsonObj.quiz.sport.q1.question

Code:

    function readJSON() {
        //Testing to see if the text would display in the DIV
        document.getElementById("output").innerHTML = "Importing JSON....";
        //script start
        JsonObj = null

        function handleFileSelect(evt) {
            var files = evt.target.files; // FileList object
            f = files[0];
            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    // Render thumbnail.
                    JsonObj = JSON.parse(e.target.result);
                    console.log(JsonObj);
                    document.getElementById('output').innerHTML += '<ul>' + JsonObj.quiz.sport.q1.question + '</ul>';
                };
            })(f);

            // Read in the image file as a data URL.
            reader.readAsText(f);
        }

        document.getElementById('files').addEventListener('change', handleFileSelect, false);

    }