Loading Json file in jquery fails in the following code

Question

I got a huge problem!

I'm trying to load a Json file with Jquery but it always fails! I've tried many different things, but nothing worked for me . I am also not sure how to really debug it, what is wrong!

Here is my code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
    var url = "content.json";
    var outp = {
                    low         :   0,
                    high        :   99,
                    name        :   "Fritz",
                    rufnummer   :   "012",
                    faxnummer   :   "345",
                    mobil       :   "678",
                    mail        :   "mail@mail.mail",  
                };

    $('#find').on("click", function(){

        var data = $.getJSON( url, function() {
          console.log( "success" );
        })
          .done(function() {
            console.log( "second success" );
          })
          .fail(function() {
            console.log( "error" );
          })
          .always(function() {
            console.log( "complete" );
          });

            console.log(data);      
            console.log(outp);
            console.log("Hi");

           data.complete(function() {
             console.log( "second complete" );
           });
        });
    });
//});
</script>
</head>
<body>
    <p>Postleitszahl:</p>
    <input type="number" autocomplete="on" name="inp" id="inp">
    <button type="button" id="find">Finden</button>
    <p class="output"></p>
</body>
</html>

Also here is my JSON:

{
    "low"         :   0,
    "high"        :   99,
    "name"        :   "Fritz",
    "rufnummer"   :   "012",
    "faxnummer"   :   "345",
    "mobil"       :   "678",
    "mail"        :   "mail@mail.mail",  
}

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — freedomn-m, Jul 01 '16 at 13:39

score 5 · Accepted Answer · answered Jul 01 '16 at 13:22

5

Instead of:

var data = $.getJSON( url, function() {...})

Try with:

$.getJSON( url, function(data) {...})

answered Jul 01 '16 at 13:22

Roxoradev

863
4
13

Thanks for the Help, but I tried that already! If i do that, it wont even make it to the console.log's! Also on the reference I used : [api.jquery.com](http://api.jquery.com/jquery.getjson/) the jqXHR Object is explained, wich I'm trying to accieve. – Niqql Jul 01 '16 at 13:26
@NiklasFett of course it won't because they run before the *asynchronous* operation has completed! – freedomn-m Jul 01 '16 at 13:37
@freedomn-m : No, if the OP try this `(console.log("result"))` he will get string "result" :) – pleinx Jul 01 '16 at 13:42
@freedomn-m but wouldn't the console.log's show at least anything? To show my Json right after the Operation solved my Problem somehow! Also I have my jqXHR Object now! :) This is my working solution: `var data = $.getJSON( url, function() {console.log(data);});` – Niqql Jul 01 '16 at 13:53
Make it: $.getJSON( url, function(result) { console.log(result); }) and you'll see your json. – freedomn-m Jul 01 '16 at 14:06
@NiklasFett given that your variable is ambiguously called "data", it should be safe to assume you want the ... data... to be loaded into it, *not* the jqXHR which is not "data". – freedomn-m Jul 01 '16 at 14:08
You're right! I want the data! I was only magically surprised that i got some result! And the `$.getJSON( url, function(result) { console.log(result); })` works fine, i just didnt realize because the program executes the bottom console.log before it uses the getJson line. I dont know why! Is there any special rule with jquery about some line execution? – Niqql Jul 01 '16 at 14:17
Yes. $.getJSON is async so its been excecuted at the same time as the other lines. You have to wait for the request to finish before manipulate result – Roxoradev Jul 01 '16 at 14:19

score 0 · Answer 2 · answered Jul 01 '16 at 13:29

You can do it like the answer from Roxoradev or try this:

data.complete(function() {
   console.log( data );
});

instead of

data.complete(function() {
   console.log( "second complete" );
});

Explain

Your deferred is now stored in data if you want do solve it call it with .complete(func) or .done(func)

From Docs:

The Promise interface in jQuery 1.5 also allows jQuery's Ajax methods, including $.getJSON(), to chain multiple .done(), .always(), and .fail() callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.

So you can also write .done()

Loading Json file in jquery fails in the following code

2 Answers2