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        :   "[email protected]",  
                };

    $('#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"        :   "[email protected]",  
}

Possible duplicate of How do I return the response from an asynchronous call? — fdomn-m
– fdomn-m, Commented Jul 1, 2016 at 13:39

Roxoradev · Accepted Answer · 2016-07-01 13:22:04Z

5

Instead of:

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

Try with:

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

answered Jul 1, 2016 at 13:22

Roxoradev

9034 silver badges13 bronze badges

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

8 Comments

Niqql Over a year ago

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 the jqXHR Object is explained, wich I'm trying to accieve.

fdomn-m Over a year ago

@NiklasFett of course it won't because they run before the asynchronous operation has completed!

pleinx Over a year ago

@freedomn-m : No, if the OP try this (console.log("result")) he will get string "result" :)

Niqql Over a year ago

@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);});

fdomn-m Over a year ago

Make it: $.getJSON( url, function(result) { console.log(result); }) and you'll see your json.

|

pleinx · Accepted Answer · 2016-07-01 13:29:43Z

0

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()

answered Jul 1, 2016 at 13:29

pleinx

6263 silver badges8 bronze badges

Collectives™ on Stack Overflow

Loading Json file in jquery fails in the following code

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related