Use .JSON in JavaScript

Question

for my current project I would like to read values of a JSON file in JavaScript. As I am new to both of them I'm kinda lost. With the code below I get the following error in my JavaScript console:

XMLHttpRequest cannot load file:///Users/Fabio/Desktop/SkriptET/files.json. Received an invalid response. Origin 'null' is therefore not allowed access.

The file is saved there though.

index.html

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="javascript.js"></script>
  </head>
  <body>
  </body>
</html>

files.json

{
   "category":
    {
       "Gleichstromkreise":
        [
            {
                "title":"Elektrische Ladung Q",
                "url":"/elladq.html",
                "url_next": "/coulomb.html",
                "url_prev": "/index.html"    
            },
            {
                "title":"Coulombsches Gesetz",
                "url":"/coulomb.html",
                "url_next":"/el_spannung.html",
                "url_prev":"ellektrische_ladung_q.html"
            }
            ],
        "Elektrische Felder":
            [
                ...
            ]
    }
}

javascript.js

$.getJSON( "files.json", function( data ) {
    alert(data.category.Gleichstromkreise[0].title);
});

which is the browser used? it is because of the Same Origin Policy, your browser is not allowing ajax request to the said file because the resources are loaded using file protocol — Arun P Johny, May 07 '14 at 08:10
possible duplicate of [Loading local json file](http://stackoverflow.com/questions/7346563/loading-local-json-file) — Juffy, May 07 '14 at 08:11

score 6 · Accepted Answer · answered May 07 '14 at 08:10

6

The problem isn't JSON, it's the Same Origin Policy. When your page is loaded from a local file rather than over HTTP, that's origin "null". Some browsers prevent ajax calls between origin null and origin null, even preventing loading files from the same directory.

If you ran that via a web server (you can install one locally for development), the files would have the same origin and the browser would allow you to load the JSON file.

answered May 07 '14 at 08:10

T.J. Crowder

1,031,962
187
1,923
1,875

Wow, six seconds XD Yours is more complete than mine though. – Niet the Dark Absol May 07 '14 at 08:11
@NiettheDarkAbsol: LOL Clearly I needed to type faster! – T.J. Crowder May 07 '14 at 08:12
Thanks for the fast reply. I tried uploading the file on my webserver and changed the url accordingly. > XMLHttpRequest cannot load http://fabitosh.bplaced.net/files.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. rent error: > – Fabitosh May 07 '14 at 08:15
@Fabitosh: Right, that's also the SOP: You can't use ajax cross-origin without using [CORS](http://www.w3.org/TR/access-control/). As I said above, if you make sure the file and the page are loaded from the **same** origin, it'll work fine. – T.J. Crowder May 07 '14 at 08:32

score 0 · Answer 2 · answered May 07 '14 at 08:10

0

You cannot use AJAX on your local machine (the file: scheme). Your page must be uploaded to a server, or you must install a server on your machine and access http://localhost/

answered May 07 '14 at 08:10

Niet the Dark Absol

320,036
81
464
592

Use .JSON in JavaScript

2 Answers2