Can't display JSON with AJAX

Question

I have a JSON file, with many data inside. And I want to display this with AJAX, so I tried to make this but doesn't work and after much search on internet I call your help :

    $(document).ready(function () {
        $.getJSON("data/liste_des_sites_des_hotspots_paris_wifi.json").done(function(){

            function donnee (data) {
                console.log(data)
            }


    })

where is `data` coming from? who is calling the `donnee` function? — webdeb, Mar 11 '17 at 19:08
Why are you using `$.done()`? remove that, it will probably work. `$.getJSON('file.json',function() {});` — Michael Coker, Mar 11 '17 at 19:09
I have this error : XMLHttpRequest cannot load file:///Users/Jonathan/Desktop/DATA/data/liste_des_sites_des_hotspots_paris_wifi.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. — KolaCaine, Mar 11 '17 at 19:12
You have a CORS problem. Try serving that file from within your application. — jmargolisvt, Mar 11 '17 at 19:20

score 1 · Answer 1 · answered Mar 11 '17 at 19:08

1

 $(document).ready(function () {
        $.getJSON("yourlocation").done(function(){

            console.log(data);


    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Your syntax is bad/wrong.

answered Mar 11 '17 at 19:08

mehulmpt

15,861
12
48
88

Ouroborus · Accepted Answer · 2017-03-11T20:55:04.230

1

AJAX doesn't work well with the file:// protocol (loading files directly from your file system). Access the page and files from a web server (localhost or otherwise).

edited Mar 11 '17 at 20:55

answered Mar 11 '17 at 19:26

Ouroborus

16,237
4
39
62

Ok I add my JSON file in my web server, and I have a url like : bloblo.com/json.json/ And I past this url in my function but doesn't work, I have a new error message : XMLHttpRequest cannot load http://bloblo.com/generated.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. – KolaCaine Mar 11 '17 at 19:31
@KolaCaine The url of the page the javascript is running from and the url of the JSON need to have the same protocol, domain, and port. – Ouroborus Mar 11 '17 at 19:34
You have a concrete example please ? – KolaCaine Mar 11 '17 at 19:37
@KolaCaine https://repl.it/GRNL Notice that `index.html` and `test.json` are served from the same protocol, domain, and port. – Ouroborus Mar 11 '17 at 19:46
When I paste all your work on my folder.. Doesn't work.. I really don't understand and for sure it will be very simple.. – KolaCaine Mar 11 '17 at 19:54
@KolaCaine The page and json both need to be served from the same server. The server needs to be a web server, you cannot use `file://`. (This is oversimplifying things, but hopefully it will eliminate some issues.) If you provide a url for the page, I can take a look. – Ouroborus Mar 11 '17 at 20:17
Thanks you, for take a part of your time. Your last comment, it did tilt in my head.. I don't understand before.. But now its ok. Big thank you – KolaCaine Mar 11 '17 at 20:51

score 0 · Answer 3 · answered Mar 11 '17 at 19:15

0

Sample getJSON example

$(document).ready(function () {
        $.getJSON("https://gist.githubusercontent.com/moredip/4165313/raw/ad00ee5bc70016a70976736d5cdf0463d5f7ea15/test.json",function(data){
       console.log(data); 
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

answered Mar 11 '17 at 19:15

bhansa

7,282
3
30
55

Thanks for your answer, but I'm right with you and I tried this before, but I have an error and I don't understand for what look at this : XMLHttpRequest cannot load file:///Users/Jonathan/Desktop/DATA/data/liste_des_sites_des_hotspots_paris_wifi.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. – KolaCaine Mar 11 '17 at 19:19
[Check this out](http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local) – bhansa Mar 11 '17 at 19:25

Can't display JSON with AJAX

3 Answers3