Define json data from an ajax request so it can used it in another function

Question

Here's my ajax function and my ShowResults function, which both work. The data from this ajax request is returned as a json array:

$.ajax({
            url: "some URL",
            type: "GET", 
            dataType: "json",
            success: ShowResults,
            error: function (jqXHR, textStatus, errorThrown) { 
            console.log("Not OK")
            }
         });

              function ShowResults (data) {
            $.each(data, function (item) {
             $("#ResultSelector").append("<option value=>" + data[item] + "</option>");
           });
           }
        });

From this I get a dynamic list of items displayed in a dropdown menu (with id 'ResultSelector'). I need to grab this same json data and use it in another function.

How do I define or extract this json data from the ajax call so that I can use it/refer to it in another function?

Thank you,

When do you want to use it? At the moment when the callback is executed? Later, after the callback was executed? — Tobbe, Jun 19 '14 at 22:32
I want to use the json data later, after the callback is executed. — user3728662, Jun 19 '14 at 22:44
Then use an variable which is reachable from the AJAX part and the other part to store the value. As there are many possible solutions (global var, data storing object, data storing function) it is not possible to give you THE answer. — Tobbe, Jun 19 '14 at 22:49
Thank you for your replies Tobbe. However, How do I make the data from the ShowResults function a global variable accessible to other functions? — user3728662, Jun 19 '14 at 23:27
See http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call and http://stackoverflow.com/questions/23667086/why-is-my-variable-undefined-after-i-modify-it-inside-of-a-function-asynchron — Tobbe, Jun 19 '14 at 23:29
Thank you Tobbe. I learned some great info about using deferred objects vs. a success function in an ajax call. — user3728662, Jun 20 '14 at 18:44

score 0 · Accepted Answer · answered Jun 20 '14 at 05:33

It is quite simple: Define a javascript variable and assign it the data you receive from ajax response. Then in the other javascript function you can use that javascript variable and get the data. The code for this is below:

var ajax_response_data="";

$.ajax({
            url: "some URL",
            type: "GET", 
            dataType: "json",
            success: ShowResults,
            error: function (jqXHR, textStatus, errorThrown) { 
            console.log("Not OK")
            }
         });

              function ShowResults (data) {
              ajax_response_data = data; //assign the ajax response data to the variable
            $.each(data, function (item) {
             $("#ResultSelector").append("<option value=>" + data[item] + "</option>");
           });
           }
        });

function another_function()
{
//here you can use the data you received from ajax
console.log(ajax_response_data);//call this function and check you console to see the data
}

Define json data from an ajax request so it can used it in another function

1 Answers1