JQuery $.getJSON load local JSON file not working

Question

My problem is very simple, I have a file with the name of new.json and I am trying to use JQuery to load and display the data. I have been writing JavaScript code:

$.getJSON("new.json", function(data){
        // I have placed alert here previously and realized it doesn't go into here
        $.each(data.streetCity, function(i,s){
            alert(s);
        });
    });
}

and the data in new.json looks as below:

{"streetCity":
    {
        "1":"Abergement-Clemenciat",
        "2":"Abergement-de-Varey",
        "3":"Amareins"
    }
};

Make sure that new.json is in the same directory as the file that is running the JS that makes the ajax request. I'm pretty sure you don't want the ; either. — Explosion Pills
– Explosion Pills, Commented Dec 14, 2012 at 2:06
if not running server on local machine, some browsers won't allow ajax without adjusting settings — charlietfl
– charlietfl, Commented Dec 14, 2012 at 2:10
Possible duplicate, if you're using Chrome: stackoverflow.com/questions/2541949/… — apsillers
– apsillers, Commented Dec 14, 2012 at 2:33
the interesting part is that it doesn't effect only Chrome but other browsers as well — yi2ng2
– yi2ng2, Commented Dec 25, 2012 at 7:43

Junnan Wang · Accepted Answer · 2012-12-14 02:10:53Z

11

If you are using Chrome. Because Chrome don't allow xmlhttprequest to request local file. So jquery can not load your new.json

you can add

--allow-file-access-from-files

to the start command of chrome. This can allow xmlhttprequest to load local resource

answered Dec 14, 2012 at 2:10

Junnan Wang

6574 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yi2ng2 Over a year ago

I was doing another application and reminds me for the issue. I have tried and yes it's working now, thanks.

mr.freeze · Accepted Answer · 2012-12-14 02:12:56Z

2

If you are using jQuery 1.5+ you can chain an error handler onto the call to see what is going on:

$.getJSON("new.json", function(data){
        // I have placed alert here previously and realized it doesn't go into here
        $.each(data.streetCity, function(i,s){
            alert(s);
        });
    }).error(function(jqXhr, textStatus, error) {
                alert("ERROR: " + textStatus + ", " + error);
    });

new.json is probably in a different path than the calling page. Also, if your snippets are accurate you don't need that last curly brace in the script or the last semicolon in the json.

answered Dec 14, 2012 at 2:12

mr.freeze

14.1k5 gold badges39 silver badges46 bronze badges

Comments

Shaunak · Accepted Answer · 2013-01-03 20:46:49Z

1

Your problem is the ';' (semicolon) in the JSON file. JSON response doesn't need a semicolon. Remove that your example should work fine!

answered Jan 3, 2013 at 20:46

Shaunak

18.2k5 gold badges59 silver badges86 bronze badges

Collectives™ on Stack Overflow

JQuery $.getJSON load local JSON file not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related