Cannot Return Result from jQuery AJAX from a Function

Question

I have a function using jQuery AJAX to return data from a data file. However, I cannot get the function to return the value. Any ideas?

    $(document).ready(function () {
        function getdata() {
            var result = 'default value';

            $.ajax({
                url: 'data/json/load.json',
                method: 'GET',
                dataType: 'json',
                success: function (response) {
                    result = response.data;
                    console.log('this is working and the result is: ' + result);
                    return result;
                }
            });

            return result;
        }

        var returndata = getdata();

        //I'm trying to return the results from my AJAX call here:
        console.log(returndata)
    });

ajax requests work in async manner you have to use callback function so when your data is ready it will run your call back function — Amir Rahman, Apr 25 '22 at 06:57

Wimanicesir · Answer 1 · 2022-04-25T08:30:23.240

1

$(document).ready(function () {
    async function getdata() {
        await $.ajax({
            url: 'https://api.publicapis.org/entries',
            method: 'GET',
            dataType: 'json',
            success: function (response) {
                result = response;
            }
        });
        return result
    }

    getdata().then((result) => console.log(result));
    
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Apr 25 '22 at 08:30

answered Apr 25 '22 at 06:58

Wimanicesir

4,606
2
11
30

1

`returndata` will always be `undefined` here. At least in OPs they had a return from getdata() - this does not. – freedomn-m Apr 25 '22 at 07:38

score 0 · Answer 2 · answered Apr 25 '22 at 07:17

You should get familiar with how Promises work, they're very convenient.

That's how You could use them in your code:

   $(document).ready(function () {
async function getdata() {
    var result = 'default value'


    await $.ajax({
        url: 'https://api.publicapis.org/entries',
        method: 'GET',
        dataType: 'json',
        success: function (response) {
            result = response
            console.log('this is working and the result is: ' + result)
        }
    })

    return result;
}

getdata().then(function(result) {
    returndata = result
    console.log(returndata)
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Cannot Return Result from jQuery AJAX from a Function

2 Answers2