Return javascript array not working

Question

I have a javascript functions that fetches some JSON from a PHP. When I get the JSON my plan is to parse it and load it in to an array and then return that array so that I can use the data anywhere.

This is the ajax function:

function get_ajax(route_val){

$.ajax({
            url: "ajax.php",
            dataType: 'json',
            data: { 
                route: route_val
        },
            success: function(result) {
                if(result.error == true){
                    alert(result.message);
                }else{

                    $.each(result, function(key1, value1){

                        //console.log(key1 + ":" + value1);

                        returnarray[key1] = value1;

                    });             

                    return returnarray;
                }

            }
        });


}
</script>

If I then try to define say var arr = get_ajax('1'), arr is going to be empty. I can alert and console.log stuff from the array from inside the function but returning it returns nothing.

It does not seem to exist outside of the function.

Any ideas?

Austin · Accepted Answer · 2012-07-31T04:06:28.207

6

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.

IE:

function handleData( responseData ) {
    // do what you want with the data
    console.log(responseData);
}

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

returning anything in the submit handler will not do anything, you must instead either hand off the data, or do what you want with it directly inside the success function.

edited Jul 31 '12 at 04:06

answered Jul 31 '12 at 04:05

Austin

6,026
2
24
24

Thanks, I didn't even know that. been trying to find out why something wasn't working in my ajax now it moving. – user3210416 May 21 '14 at 14:59

score 3 · Answer 2 · answered Jul 31 '12 at 04:05

The problem is that your success function isn't returning your array to anywhere. What you need to do is fully handle your data right there inside of the success handler, or else call another method/function to do what's needed.

Hypothetically it might look something like this:

success: function(result) {
    if(result.error == true){
        alert(result.message);
    }else{
        $.each(result, function(key1, value1){
            returnarray[key1] = value1;
        });
        //Something like this  
        ajaxHandlers.handleReturnedArray(returnarray);
    }
}

score 0 · Answer 3 · answered Jul 31 '12 at 05:13

If you absolutely want to have it return something, you can do a synchronous request (Despite it's not the point of AJAX (asynchronous JavaScript and XML)).

function get_ajax(route_val){

    var returnarray = [];

    $.ajax({
        url: "ajax.php",
        dataType: 'json',
        async: false,
        data: { 
            route: route_val
    },
        success: function(result) {
            if(result.error == true){
                alert(result.message);
            }else{

                $.each(result, function(key1, value1){
                    returnarray[key1] = value1;

                });             

            }
        }
    });

    return returnarray;
}

Return javascript array not working

3 Answers3