CODEWITHSUNDEEP
javascripthtmljson
Enayet Hussain
Enayet Hussain

Reputation: 1018

getJSON not fetching data

My code below is not fetching data from data.js The page works fine when the JSON data is hard coded into the page.

<head>
    <title>Test Page</title>
    <script>
    function jsontest() {
        var text;
        $.getJSON("data.js", function(result) {
            text = result;
        });
        var obj = JSON.parse(text);
        document.getElementById("content").innerHTML =
        obj.name + "<br>" +
        obj.street + "<br>" +
        obj.phone;
    }
    </script>
</head>
<body onload="jsontest();">
    <h1>Testing Page</h1>
    <p id="content"></p>
</body>

My data looks like this

{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}

Am I making a simple nooby mistake?

Upvotes: 0

Views: 190

Answers (4)

Claudio Redi
Claudio Redi

Reputation: 68440

The first thing I notice is that you're using getJSON in sync mode. This won't work since it's executed asynchronous. You need to place your logic inside finish handler

function jsontest() {
    var text;
    $.getJSON("data.js", function(result) {
        text = result;
        var obj = JSON.parse(text);
        document.getElementById("content").innerHTML =
        obj.name + "<br>" +
        obj.street + "<br>" +
        obj.phone;          
    });
}

In your code, by the time you do

var obj = JSON.parse(text);

method getJSon didn't return yet so text contains the default value. It sends the request to the server and continue method flow without waiting for the result.

That's what the handler is for: to put logic that needs to be executed when request is complete.

Upvotes: 2

cs04iz1
cs04iz1

Reputation: 1815

Javascript is single-threaded and non-blocking, as a result, while the ajax call is being executed the program counter will continue. Thus will be parsing something which is undefined.

If you put the code beneath the ajax callback inside it, it will work just fine.

Upvotes: 1

taxicala
taxicala

Reputation: 21769

You have to put your code inside the callback, or you wont have the text var populated:

function jsontest() {
    var text;
    $.getJSON("data.js", function(result) {
        text = result;
        var obj = JSON.parse(text);
        document.getElementById("content").innerHTML =
        obj.name + "<br>" +
        obj.street + "<br>" +
        obj.phone;
    });

}

Upvotes: 0

tymeJV
tymeJV

Reputation: 104785

$.getJSON is an async call - so when you try and run JSON.parse outside the callback, it won't work since the call is still in progress. Move your code to the callback and you'll be good:

function jsontest() {
    $.getJSON("data.js", function(result) {
        var text = result;

        var obj = JSON.parse(text);
        document.getElementById("content").innerHTML =
          obj.name + "<br>" +
          obj.street + "<br>" +
          obj.phone;
    }); 
    //Anything after the `getJSON` call is executed immediately. 
    //$.getJSON is still in progress when these lines are executing
}

Upvotes: 1

Related Questions