0

I'm trying to store ajax result into variable. When I use console.log it gives my html tag that I wanted, But when I trying set into global variable it said undifined.

How I can store ajax result into global variable

var result;
$.ajax({
  url: "person.html",
    success: function(data){
    //result=data;
    console.log(data);
  }
});
//console.log(result);
M Hamza Javed
  • 1,269
  • 4
  • 17
  • 31
rnDesto
  • 259
  • 3
  • 15
  • That's because the `console.log(result)` will run before the `result=data` – George Feb 21 '17 at 10:28
  • 1
    Possible Duplicate of http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron – Sanchay Kumar Feb 21 '17 at 10:29
  • 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) – Maxx Feb 21 '17 at 10:45

4 Answers4

2

Ajax is asynchronous, meaning that the code to find out what result IS is running at the same time that the console log of result, which is why you're getting undefined, because result hasn't been set by the time the value is being console logged.

The only way I know of to console log the result would be to either do it within the ajax success function or to have the ajax success function call a subsequent function that contains the console log. It's the only way to be sure that a value has been returned before you console log it.

Examples:

EXAMPLE 1:

var result;

$.ajax({
  url: "person.html",
    success: function(data){
        result=data;
        console.log(result);
        //Note that in this instance using the variable 'result' is redundant, as you could simply console.log data like you're already doing.
    }
});

EXAMPLE 2:

var result;

$.ajax({
  url: "person.html",
    success: function(data){
        result=data;
        subsequentFunction(result);
    }
});

function subsequentFunction(result){
    console.log(result)
}
// Note that if you're doing something simple with result that this could be a bit long winded and unnecessary.

It all depends on how much you're wanting to do with the result as to which option would be better.

Note: There is also a property of an ajax call called 'async' that you can set to false which forces it to be synchronous, but this is generally considered a bad idea as it will prevent any other code from running until the result is returned and locking the browser.

DibsyJr
  • 854
  • 7
  • 18
1

$.ajax returns a promise, meaning that your code KNOWS it's going to receive a response, but because it's dependent on an external source, it doesn't know when this response will come in.

http://www.htmlgoodies.com/beyond/javascript/making-promises-with-jquery-deferred.html

See above link for more information on the subject.

FvB
  • 713
  • 6
  • 15
1

ajax requests are async so your console.log(result) is running before getting response of your request. you should do something like this

var result;

$.ajax({
  url: "person.html",
    success: callback(data)
});

function callback (data){
    result=data;
    console.log(result);
}
prabodhtiwari
  • 208
  • 1
  • 2
  • 9
1

You will not see anything beacuse the data is not populated yet. In your specific case you actually need to wait for the response. You can achieve it by using the following snippet.

$(document).ready(function(){
    var data = $.parseJSON($.ajax({
        url:  'person.html',
        dataType: "json", 
        async: false
    }).responseText); 
    var myProp = data.property; // Here you can access your data items
});

Another approach should be like you can push your data in an array and can access it in another function like this:

var result =[];

$(document).ready(function()
{
  $.ajax({
    url: 'person.html',
    async:true,
    dataType: "json", 
    success: function(data)
     { 
        result.push(data);
     }
  });
});
NewFunction()
{
   console.log(result); 
}
Afnan Ahmad
  • 2,492
  • 4
  • 24
  • 44