getJSON request fails

Question

I have a json file with some data to append into a div in the html document when a button is clicked:

html:

<div class="json"></div>
<button id="one"></button>

here the javascript:

function one(){
    $("#one").click(function(){
        $.getJSON('one.json',function(data){
            alert("success");       
        })
        .done(function() { alert('getJSON request succeeded!'); })
        .fail(function() { alert('getJSON request failed! '); })
        .always(function() { alert('getJSON request ended!'); });
    });
}

$(document).ready(function() {
   one();
});

the one.json file is in the same directory of js file. When I click the button the alert is "getJSON request failed"...where is the mistake?

Is the html file also in the same directory? Try to make a root-relative call like "/folder/one.json" instead — RononDex, Jan 13 '14 at 09:33
what is the path to the html & js file? are they in different directories — Arun P Johny, Jan 13 '14 at 09:33
This is impossible to answer, could be anything! Wrong filename, wrong path, not running a webserver, something else entirely — adeneo, Jan 13 '14 at 09:35
or malformed JSON: http://stackoverflow.com/questions/6186770/ajax-request-return-200-ok-but-error-event-is-fired-instead-of-success/6186905#6186905 — Salman A, Jan 13 '14 at 09:51

score 2 · Accepted Answer · answered Jan 13 '14 at 09:33

2

See if below code works :-

 $.getJSON('/YourDirectory/one.json',function(data){
            alert("success");       
        })

answered Jan 13 '14 at 09:33

Anup

8,072
15
62
122

score 1 · Answer 2 · edited Jan 13 '19 at 04:19

1

$.getJSON() takes a url as the parameter for where to get the JSON, not a file path.

$.getJSON('/one.json', function (data) { ... });

or

$.getJSON('http://localhost:1234/one.json', function (data) { ... });

Take the url for the one.json file and paste into a browser address bar. If the browser returns the JSON content, then you know you can use that url in the $.getJSON()` call.

edited Jan 13 '19 at 04:19

ClickThisNick

4,680
8
32
59

answered Jan 13 '14 at 09:34

Jason Evans

28,042
13
88
145

score 1 · Answer 3 · answered Jan 13 '14 at 09:34

1

If you html is opening from url

localhost:80/project/test.html

then the json path will be

localhost:80/project/one.json

So make sure html and json in same folder.

answered Jan 13 '14 at 09:34

A Paul

7,473
2
24
53

score 1 · Answer 4 · answered Jan 13 '14 at 09:35

well, either remove the success callback inside the getJSON method , and use .done .fail.. or use success callback only

 function one(){
   $("#one").click(function(){
    $.getJSON('path/to/one.json')
    .done(function() { alert('getJSON request succeeded!'); })
    .fail(function() { alert('getJSON request failed! '); })
    .always(function() { alert('getJSON request ended!'); });
   });
}

$(document).ready(function() {
  one();
 });

score 1 · Answer 5 · answered Jan 13 '14 at 09:35

Your Ajax request will look in the url of your current page, so if you are in :

mysite.com/index.html, it will look on mysite.com/one.json

and

mysite.com/category/index.html, it will look on mysite.com/category/one.json

If you have a modern browser, you can open the developer console to see what is the exact request made.

getJSON request fails

5 Answers5