CODEWITHSUNDEEP
jqueryajax
Dan Sebastian
Dan Sebastian

Reputation: 539

Storing variables from AJAX

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.

Upvotes: 1

Views: 242

Answers (5)

Ephraim Zeller
Ephraim Zeller

Reputation: 49

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);
}

Upvotes: 1

devlin carnate
devlin carnate

Reputation: 8591

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));
}

Upvotes: 0

Kristian Feldsam
Kristian Feldsam

Reputation: 76

you show define variable outside of my_ajax promise.

var elements;

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

console.log(elements);

Upvotes: 0

noctrnal
noctrnal

Reputation: 191

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

Upvotes: 4

TAGraves
TAGraves

Reputation: 1409

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.

Upvotes: 0

Related Questions