access data from php to javascript

Question

I intend to access set of records from MYSQL and handle it in Javascript for a calendar component. Hence I used PHP to fetch the records and dumped it as a array of json records to a flat file. Now i tried to read this json via flatfile from javascript but I am facing few issues.

var event_list;
$.getJSON("testFile.json", function(json) {
 alert("fetching");
 event_list= jQuery.extend(true, {}, json);
 alert(json);
 event_list=json;
 alert(JSON.stringify(event_list));   // This echo's me the data
 });
 alert(JSON.stringify(event_list));   // But this doesn't ???

I am unable to access the data outside the scope of getJSON() routine.

It would be great if someone could help me with this snippet.

possible duplicate of [How to return AJAX response Text?](http://stackoverflow.com/questions/1225667/how-to-return-ajax-response-text) — Quentin, Jul 29 '13 at 13:47
@Quentin Theoretically, it is (as in the root of the problem is the same), but the poster of the question could not have found that question on his own because it has no other similarities to his own. — lazyCrab, Jul 29 '13 at 14:03

Halcyon · Answer 1 · 2013-07-29T13:52:09.747

2

You can't access the fetched JSON outside of the callback because it's bound to the scope of the callback, which may or may not be asynchronous (in this case, it is).

You can however hide the scoping by using Deferred (aka Promises/A).

jQuery has support for it like this:

var request = $.getJSON("testFile.json");
request.done(function (data) {
    console.log(data);
});

So now request is a promise that holds the value of your request.

There is no (good) way to make data available synchronously in the global scope.

edited Jul 29 '13 at 13:52

answered Jul 29 '13 at 13:47

Halcyon

57,230
10
89
128

I get this error: Uncaught TypeError: Object # has no method 'done' – deeshank Jul 29 '13 at 13:57
1

Are you using an older version of jQuery? The current version seems to support Deferreds: http://api.jquery.com/jQuery.getJSON/ – Halcyon Jul 29 '13 at 13:59

score 1 · Answer 2 · answered Jul 29 '13 at 13:46

1

Because it is an asynchronous call, not synchronous. The call outside is reading the variable before the Ajax call is made/returned. You need to do all of the work in the callback.

answered Jul 29 '13 at 13:46

epascarello

204,599
20
195
236

lazyCrab · Answer 3 · 2013-07-29T14:00:34.300

1

JQuery is using AJAX to load the JSON file, and AJAX is asynchronous.

Because of that what's happening is that the line after the getJSON is getting called first while the JSON file is still being loaded and the callback hasn't been called yet.

That's why event_list is still undefined and doesn't return any data.

edited Jul 29 '13 at 14:00

answered Jul 29 '13 at 13:49

lazyCrab

187
17

score 1 · Accepted Answer · answered Jul 30 '13 at 09:41

You could make use of the async property and set to FALSE and global property to FALSE which would serve your requirements.

var data;
data= function () {
var tmp = null;
$.ajax({
    'async': false,
    'type': "POST",
    'global': false,
    'dataType': 'html',
    'url': "fetch_data.php",
    'data': { 'userid': "19"},
    'success': function (json) {
        tmp = json;
    }
});
return tmp;
}();

alert(data); //would give you the json data from PHP

access data from php to javascript

4 Answers4