Storing variables from AJAX

Question

How do I gain access to variables that come from a ajax request that is returned from a function? I can console.out the variable, but I can't seem to store it outside the scope.

How it looks like:

1. In the html:

   function my_ajax() {

   var stuff = 'stuff';
   return $.ajax({
       type: "POST",
       url: "file.php",
       data: {"something": "wrong"}
   }); /* end ajax */  
   

   } /* end my_ajax() */

...then in the js-file:

my_ajax().then(function(response){
        var elements = jQuery.parseJSON(response);              
        var one = elements.one;
        var two = elements.two;

//now say that I need to use 'one' outside this function. I try this:

    stuff(elements);

    });

//this works

function stuff(el) {
var something = el.one;
console.log(something);
}

//this doesn't work

function stuff(el) {
var something = el.one;
return something;
}

//this works

var try_obj = {
    please_work: function(el) {
        var something = el.one;
        console.log(something);
    }
};

So how do I store variables from ajax of this nature so that I can reuse them on the html-page or in the js-file? I need to send them back with another ajax request.

Answer 1

You are using Ajax incorrectly. The idea is not to have it return anything, but instead hand off the data to something called a callback function, which handles the data (for example, your second AJAX call).

function handleData( responseData ) {

    // Do what you want with the data
    console.log(responseData);
}

$.ajax({
    url: "hi.php",
    ...
    success: function ( data, status, XHR ) {
        handleData(data);
    }
});

Reference

Answer 2

If you want to store the values in a variable that exists outside of the calling function, you need declare it outside of the function initially.

So, if you want to have the 'something' value available anywhere on the page, you would do something like:

my_ajax().then(function(response){
    var elements = jQuery.parseJSON(response);              
    var one = elements.one;
    var two = elements.two;

    savestuff(elements);

});

//declaring this outside of any function makes it available to all
var something = "";

//save to the previously declared 'something' variable
function savestuff(el) {
    something = el.one;  /* no 'var' so JS knows to look in page / global scope  */
    showstuff();
}

//access the value from any function on the page freely
function showstuff(){
    alert(something);
}

Answer 3

If you already have an object like try_obj accessible globally then it's as simple as:

my_ajax().then(function(response){
    var elements = jQuery.parseJSON(response);              
    var one = elements.one;
    var two = elements.two;

//now say that I need to use 'one' outside this function. I try this:

try_obj.ajaxStore = elements;

});

Then just call try_obj.ajaxStore from wherever you need to.

Here is a alternative. You could set a global variable:

my_ajax().then(function(response){
    var elements = jQuery.parseJSON(response);              
    var one = elements.one;
    var two = elements.two;

//now say that I need to use 'one' outside this function. I try this:

window.ajaxStore = elements;

});

Then ajaxStore can be used anywhere. Usually you want to avoid using global variables, however.

Answer 4

Declare the variable outside of the AJAX call, assign the value to the variable on the AJAX return, like so:

function myFunction() {
    var elements = {};
    var promise = $.ajax({
       //ajax stuff
    }).success(function(response) {
       elements = jQuery.parseJSON(response);
    });
    promise.always(console.log(elements));
}

Answer 5

you show define variable outside of my_ajax promise.

var elements;

my_ajax().then(function(response){
   elements = jQuery.parseJSON(response);
   ...
}

console.log(elements);