Ajax Get request will not find JSON file

Question

I have a JSON file that I am trying to pull Key and Values from but this function will not ever succeed. The 'datafile.json' is in the exact same directory. The alert(weblink) never runs but the alert('test 1') works fine.

<div class="container"> 
    <table class="table table-bordered table-striped table-hover" align="center">
        <col width="50%">
        <col>
        <col width="15%">
        <col width="25%">
        <thead>
            <tr bgcolor="#76767a" align="right">
                <th align="left">Skill</th>
                <th>Rank</th>
                <th>Level</th>
                <th>Experience</th>
            </tr>
        </thead>
    </table>
</div>

<script>
var weblink = 'datafile.json';
var data = {};
$(document).ready(function(){   
    alert('test 1');    
    $.ajax({
        type : 'GET',
        dataType : 'json',
        url : weblink,
        success: function(data){
            alert(weblink);
            $.each(datas, function(key, val){
            items.push("<tr>");
            items.push("<td id =''"+key+"''>"+val.skill+"</td>");
            items.push("<td id =''"+key+"''>"+val.rank+"</td>");
            items.push("<td id =''"+key+"''>"+val.level+"</td>");
            items.push("<td id =''"+key+"''>"+val.exp+"</td>");
            items.push("</tr>");
            });
            $("<tbody/>", {"class": "mydata", html: items.join("")}).appendTo("table");
        }
    });
});

</script>

My datafile.json is:

[
{
"Skill": "Overall",
"Rank": "1132673",
"Level": "420",
"Exp": "466345"
},
{
"Skill": "Attack",
"Rank": "1256428",
"Level": "23",
"Exp": "6563"
},
{
"Skill": "Defence",
"Rank": "1182611",
"Level": "28",
"Exp": "11069"
},
{
"Skill": "Strength",
"Rank": "1250418",
"Level": "22",
"Exp": "6238"
},
{
"Skill": "Constitution",
"Rank": "1292788",
"Level": "27",
"Exp": "10413"
},
{
"Skill": "Ranged",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Prayer",
"Rank": "1116462",
"Level": "20",
"Exp": "4611"
},
{
"Skill": "Magic",
"Rank": "1058028",
"Level": "32",
"Exp": "18183"
},
{
"Skill": "Cooking",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Woodcutting",
"Rank": "955909",
"Level": "47",
"Exp": "79651"
},
{
"Skill": "Fletching",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Fishing",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Firemaking",
"Rank": "668820",
"Level": "58",
"Exp": "245606"
},
{
"Skill": "Crafting",
"Rank": "1060629",
"Level": "16",
"Exp": "3090"
},
{
"Skill": "Smithing",
"Rank": "956265",
"Level": "35",
"Exp": "24400"
},
{
"Skill": "Mining",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Herblore",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Agility",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Thieving",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Slayer",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Farming",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Runecrafting",
"Rank": "619807",
"Level": "42",
"Exp": "49314"
},
{
"Skill": "Hunter",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Construction",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Summoning",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Dungeoneering",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Divination",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Invention",
"Rank": "0",
"Level": "1",
"Exp": "0"
}
]

Answer 1

You can load json files using script tags. Optionally give it a .js extension. You would have to assign it to a variable, and it will be treated like javascript, but maybe that works for you.

    <script type="text/javascript" language="javascript" src="datafile.json"></script>
<div class="container"> 
    <table class="table table-bordered table-striped table-hover" align="center">
        <col width="50%">
        <col>
        <col width="15%">
        <col width="25%">
        <thead>
            <tr bgcolor="#76767a" align="right">
                <th align="left">Skill</th>
                <th>Rank</th>
                <th>Level</th>
                <th>Experience</th>
            </tr>
        </thead>
    </table>
</div>

<script>
// var data is defined in the json script
$(window).load(function(){   
  $.each(data, function(skill) {
      items.push("<tr>");
      $.each(skill, function(key, val){
          items.push("<td id =''"+key+"''>"+val.skill+"</td>");
          items.push("<td id =''"+key+"''>"+val.rank+"</td>");
          items.push("<td id =''"+key+"''>"+val.level+"</td>");
          items.push("<td id =''"+key+"''>"+val.exp+"</td>");
      });
      items.push("</tr>");
  })

  $("<tbody/>", {"class": "mydata", html: items.join("")}).appendTo("table");
});

</script>

datafile.json

var data =
[
{
"Skill": "Overall",
"Rank": "1132673",
"Level": "420",
"Exp": "466345"
},
{
"Skill": "Attack",
"Rank": "1256428",
"Level": "23",
"Exp": "6563"
},
{
"Skill": "Defence",
"Rank": "1182611",
"Level": "28",
"Exp": "11069"
},
{
"Skill": "Strength",
"Rank": "1250418",
"Level": "22",
"Exp": "6238"
},
{
"Skill": "Constitution",
"Rank": "1292788",
"Level": "27",
"Exp": "10413"
},
{
"Skill": "Ranged",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Prayer",
"Rank": "1116462",
"Level": "20",
"Exp": "4611"
},
{
"Skill": "Magic",
"Rank": "1058028",
"Level": "32",
"Exp": "18183"
},
{
"Skill": "Cooking",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Woodcutting",
"Rank": "955909",
"Level": "47",
"Exp": "79651"
},
{
"Skill": "Fletching",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Fishing",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Firemaking",
"Rank": "668820",
"Level": "58",
"Exp": "245606"
},
{
"Skill": "Crafting",
"Rank": "1060629",
"Level": "16",
"Exp": "3090"
},
{
"Skill": "Smithing",
"Rank": "956265",
"Level": "35",
"Exp": "24400"
},
{
"Skill": "Mining",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Herblore",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Agility",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Thieving",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Slayer",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Farming",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Runecrafting",
"Rank": "619807",
"Level": "42",
"Exp": "49314"
},
{
"Skill": "Hunter",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Construction",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Summoning",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Dungeoneering",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Divination",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Invention",
"Rank": "0",
"Level": "1",
"Exp": "0"
}
];