How to use Ajax response out side of the function with JQuery?

Question

I am new with JQuery, How can I use the Ajax response ( HTTP GET )outside of the function. this is my code

$.ajax ({
            type: "GET",
            url: "/api",
            success: success,
            error: error
        });


        function success(data) {                
            console.log(data)

        }

        function error(request, status, error) {
            console.log(error)
        }

I need to use data in other parts of the script, once I get the data I need to process it, need the JSON free from .ajax

Jeff Matthews · Answer 1 · 2018-01-28T19:44:00.157

You just mean using data outside of the success callback? You could define a top-level variable, like myData, and assign it.

let myData;

$.ajax ({
        type: "GET",
        url: "/api",
        success: success,
        error: error
    });


    function success(data) {                
        console.log(data)
        myData = data;   <--- Assign it.
    }

    function error(request, status, error) {
        console.log(error)
    }

Understand, however, that myData will be null until the Ajax process is complete and data is returned. So, if you attempt to reference myData, it's always good to make sure the data has been assigned to it - e.g.,

if (myData) {
   do something
}

It continued to fail for you because first, you did not intialize myData. That's the line, let myData; This tells javascript there is a myData variable in the first place. Since a value is not assigned at that time, it is null.

Next, you need to assign its value after your data comes back. That's the line I showed where myData = data;

Finally, you need to access myData where you need it. However, ajax runs asynchronously. This means it goes to the server to get your data, and it comes back... whenever it is done. This can be any time or never. So, when you try to access myData the way you tried, it still remains null. It is not assigned the value until the data comes back from the server. In the meantime, your code just kept right on going. It doesn't wait around for the data to come back. That's what asynchronous means.

Because the ajax call is asynchronous, that's why your "success" function works. Basically, when the data comes back from the server, your success function is called. Your console.log(data) is inside a callback. It is from inside the callback that you need to do whatever you want.

For example, you could write a function like so, assuming, for example, you want to know how many items are in your data:

function doSomethingWithMyData(data) {
   return data.length;   
}

In that case, your ajax would look like this:

function success(data) {                
    console.log(data)
    let itemCount = doSomethingWithMyData(data);  <-- This is the proper time to try to use the data.  It will call your function when the data is returned.
}

I think this article explains the process fairly well: https://github.com/maxogden/art-of-node#callbacks

OK. So, I assume that I understood what you are wanting. Does your console.log(data) show the data as you expect it? — Jeff Matthews, Jan 28 '18 at 19:22
Sounds like a scoping or timing problem. Edit your code to show how you are attempting to use my example. — Jeff Matthews, Jan 28 '18 at 19:25
I need to use myData in other part of the script , once I get the data I need to process it , need the json free from .ajax — TheTechGuy, Jan 28 '18 at 19:28
OK. I see now where you need some help. You need to understand both scoping and timing. I will re-write my answer... — Jeff Matthews, Jan 28 '18 at 19:29

score 1 · Answer 2 · answered Jan 28 '18 at 19:32

1

Try this.

let my_data;  // this will hold the response data

$.ajax({
    type:'GET',
    url: '/api',
    success:function(data){
        // console.log(data);

        my_data = data;

    }
});

answered Jan 28 '18 at 19:32

dilusha_dasanayaka

1,401
2
17
30

How to use Ajax response out side of the function with JQuery?

2 Answers2