Jquery/JavaScript - Store Ajax jSONP response into variables

Question

I'm getting the result of an ajax request using JSONP without any issues. Here is my code

    function TestJSONP()
    {
    $.ajax({
        url: "https://www.sample.com/api/users.json?account_api_key=0000&unique_install_id=0000&email_address=test@test.com&locale_id=en-US&operating_system_version=6.1.7601.65536&operating_system_architecture=64&outlook_version=2013&version=0.0.5.0",

        // the name of the callback parameter, as specified by the YQL service
        jsonp: "callback",

        // tell jQuery we're expecting JSONP
        dataType: "jsonp",

        // tell YQL what we want and that we want JSON
        data: {
            q: "select title,abstract,url from search.news where query=\"cat\"",
            format: "json"
        },

        // work with the response
        success: function (response) {
            console.log(response); // server response
        }
    });
}

I need to set the response data into variables which I can access outside that request. Please advice me. (I read some similar questions and I was not able to apply their solutions for mine. Because I think my response data structure is bit different) Please see following block to see the results of console.log(response);

{
 account: 
 {
 id: "sadasdd4234",
 name: "Sample Development",
 support_email_address: "test1@sample.com",
 report_threat_button_text: "text1",
 successful_report_text: "text2",
 false_report_text: "text3",
 },
 current_plugin_version: "0.0.1",
 id: "trt45rety",
 status: "ok",
 type: "api_response",
 user: 
 {
 id: "erwrretV0",
 language: "en",
 first_name: "Robert",
 last_name: "Croos",
 email_address: "test2@sample.net"
 }
}

Thanks in advance. Kushan Randima

Answer 1

Try this example:

Just declare a Global variable outside of the function and assign response variable to that global variable after ajax response.

   var jsonData;
   function TestJSONP()
    {
    $.ajax({
        url: "https://www.sample.com/api/users.json?account_api_key=0000&unique_install_id=0000&email_address=test@test.com&locale_id=en-US&operating_system_version=6.1.7601.65536&operating_system_architecture=64&outlook_version=2013&version=0.0.5.0",

        // the name of the callback parameter, as specified by the YQL service
        jsonp: "callback",

        // tell jQuery we're expecting JSONP
        dataType: "jsonp",

        // tell YQL what we want and that we want JSON
        data: {
            q: "select title,abstract,url from search.news where query=\"cat\"",
            format: "json"
        },

        // work with the response
        success: function (response) {
            console.log(response); // server response
            jsonData = response; // you can use jsonData variable in outside of the function
        }
    });
}

Answer 2

I tried validating the json response and it appears to be invalid and probably thats the reason you are not able to set it to variables. You can validate the json response at http://jsonlint.com/ .

Once you get the json response corrected , you can define a variable outside the scope of function and you can assign the response to the variable. ensure the variable is defined before the function.

var responseObject ;
function TestJSONP(){
 .....
 .....

 // work with the response
   success: function (response) {
      responseObject = JSON.parse(response);
}

hope this helps.

Answer 3

Amy's answer is correct. Good Job! I will re-write it with more details. It will be helpful for a beginner.

var jasonData;
   function TestJSONP()
{
$.ajax({
    url: "https://www.sample.com/api/users.json?account_api_key=0000&unique_install_id=0000&email_address=test@test.com&locale_id=en-US&operating_system_version=6.1.7601.65536&operating_system_architecture=64&outlook_version=2013&version=0.0.5.0",

    // the name of the callback parameter, as specified by the YQL service
    jsonp: "callback",

    // tell jQuery we're expecting JSONP
    dataType: "jsonp",

    // tell YQL what we want and that we want JSON
    data: {
        q: "select title,abstract,url from search.news where query=\"cat\"",
        format: "json"
    },

    // work with the response
    success: function (response) {
        console.log(response); // server response

        //Save Account Data
        account_id = response.account.id;
        name = response.account.name;
        support_email_address = response.account.support_email_address;
        report_threat_button_text = response.account.report_threat_button_text;
        successful_report_text = response.account.successful_report_text;
        false_report_text = response.account.false_report_text;

        //Main Object Data
        current_plugin_version = response.current_plugin_version;
        id = response.id;
        status = response.status;
        type = response.type;           

        //Save User Data
        user_id = response.user.id;
        language = response.user.language;
        first_name = response.user.first_name;
        last_name = response.user.last_name;
        email_address = response.user.email_address;
    }
});
}