A function to enter the ajax result in a variable

Question

I have a problem with this code. This happens: just launch the code from console.log I get null, if I press the update button function works.

why is this happening? how do I fix?

var urljson = "data_json.php";
var data = null;
var jqXHR = $.ajax
({
  type: "GET",
  url: urljson,
  dataType: 'json',
  success: successHandler

});
function successHandler(result) {
     data = result; 
 }

function update(){
var jqXHR = $.ajax
({
  type: "GET",
  url: urljson,
  dataType: 'json',
  success: successHandler

});
function successHandler(result) {
     data = result; 
 }
}

$(document).ready(function(){   

 console.log(data) //// null

});


document.getElementById('update').addEventListener('click', function() {

update();

console.log(data) //// Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, other 3213… ]

});

On document.ready event, the JSON hasn't returned from the server yet, so data is still null. It's only when the JSON file arrives and the succesHandler gets triggered, that data gets set. — Shilly, Dec 30 '16 at 15:49

score 1 · Answer 1 · answered Dec 30 '16 at 15:58

1

$.ajax() returns results asynchronously. Use success handler or .then() chained to $.ajax() to process response returned from request.

function update() {
  var jqXHR = $.ajax({
    type: "GET",
    url: urljson,
    dataType: "json",
    success: successHandler    
  });

  function successHandler(result) {
    data = result;
    // do stuff with `data` here
    console.log(data);
  }
}

$(document).ready(update);

jsfiddle https://jsfiddle.net/89jkzzyk/

answered Dec 30 '16 at 15:58

guest271314

1
15
104
177

it works, but how do I work with the "date" variable in the "$(document) .ready(update)"? – Snakeater Dec 30 '16 at 16:19
Not sure what you mean? Access the result of `$.ajax()` response within `success` callback or `.then()` callback. – guest271314 Dec 30 '16 at 16:35
I'm trying to use the date variable in this way but does not work: $(document).ready(update), function(){ var length = data.length; console.log(length) }; – Snakeater Dec 30 '16 at 16:44
Perform tasks on `data` within `$.ajax()` `success` callback. See [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) – guest271314 Dec 30 '16 at 16:49
I know but I wish I need that "data" are updated every few minutes without the party of code contained in the "success" is updated – Snakeater Dec 30 '16 at 17:01
_" but I wish I need that "data" are updated every few minutes without the party of code contained in the "success" is updated"_ Updating every few minutes does not appear at original Question. See http://stackoverflow.com/help/how-to-ask – guest271314 Dec 30 '16 at 17:14

score 0 · Answer 2 · answered Dec 30 '16 at 15:52

0

When the page loads, update() is not getting called, thus data is null. Add your function call to $(document).ready() and it should work.

answered Dec 30 '16 at 15:52

johnniebenson

540
3
9

the var jqXHR does exactly the same as update(), so although it's true that update() doesn't get called, changing `$(document).ready(function(){ console.log(data) });` to `$(document).ready(function(){ update();console.log(data) });` still won't work. Data only gets set once the xhr call triggers successHandler, so anything done with the data should go into the successHandler, not into the document.ready The click event only works because the jqXHR on script load already fetched the json file by the time update() gets called by the click. – Shilly Dec 30 '16 at 15:56

A function to enter the ajax result in a variable

2 Answers2