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"
}
]

if you are not using a http server, and you are using chrome, this will not work ... solution: use a http server — Jaromanda X, Apr 21 '17 at 00:03
all of this is located on my server. My webpage loads fine but cannot access the JSON in the same directory. — BrandonNova, Apr 21 '17 at 00:06
Try to change weblink address to "./datafile.json" and see the results — Sajed, Apr 21 '17 at 00:10
Maybe this help: https://stackoverflow.com/questions/9066335/ajax-get-not-working-with-local-json-file — Jonathan Dion, Apr 21 '17 at 00:11
No errors Jaromanda and datas i changed but made no difference — BrandonNova, Apr 21 '17 at 00:21
Did you Try to browse the file url directly in the browser? Does it return the file successfully there? Put an error handler block `error:` in your Ajax block and see if there is any error such as 404,400 or 500. Debugging is the only way to figure out the issue. — Chetan, Apr 21 '17 at 00:29

chris · Accepted Answer · 2017-04-21T00:56:03.887

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"
}
];

Didnt help anything. Before I added this code the datafile.json would not even show up in Sources via the developer tools. Now it does but still no success from function. — BrandonNova, Apr 21 '17 at 00:17
you would no longer need the ajax, you can directly use the variable, ill edit answer — chris, Apr 21 '17 at 00:19
Okay that worked up until I get an error stating that 'data' is not defined. (index):52 Uncaught ReferenceError: data is not defined and i did alter the JSON file — BrandonNova, Apr 21 '17 at 00:32
ah yea, document.ready fires when the DOM is loaded not when assets are loaded. You want $(window).load() . bc that will fire AFTER the json file has been loaded and the data var defined. I updated my answer. — chris, Apr 21 '17 at 00:48
Thank you soooo much! it populated the table!!!! I just now have to figure out why all values are returning as undefined. — BrandonNova, Apr 21 '17 at 00:52
your loop assumes an object and has forgotten these are all nested in an array. I will update again :) — chris, Apr 21 '17 at 00:53
two caveats, first json is almost a javascript object literal (just no types like Date), so you might as well go ahead and make it be a .js file. If you want this data to be dynamic, you will either have to write to this .js file and make sure you set an appropriate cache strategy (so browsers will use the fresh version) or look into a small http server, possibly nodejs, and go back to ajax. Two, global variables are not so great, that is what we have done here by saying var data = ... in the json file. You should wrap this in a function or module to prevent global namespace cluttering. — chris, Apr 21 '17 at 01:02

Ajax Get request will not find JSON file

1 Answers1