通过回调从异步函数返回数据时未定义

Question

The function gets the data from URL and then passes it to another function where the listing is done dynamically based on users in the list of URL. I tried callback but I am getting the following error service.js:9 Uncaught TypeError: callback is not a function

This is the function in one js file:

function GetData(callback, passdata) {
    $.ajax({
        type: 'GET',
        url: 'https://jsonplaceholder.typicode.com/users',
        success: function (response) {
            debugger;
            console.log(response);
            return callback(response, passdata);
        }
    });
 } 

This is the function in another js file (wherein I want to list the data from the URL):

$(document).ready(function () {

        var getData = GetData();
        var $data = $('#dataDisplay');

        function listData(response, passdata) {
            var data = response;
            var passeddata = passdata;

            $.each(data, function (i, users) {
                $data.append('<li>' + '<span>' + users.name + '</span>' + '<br> <span>' + users.email + '</span>' + ' </li>');
            });

            //adds li dynamically 
            $("li").append('<i class="material-icons delete">' + "delete" + '</i>');
            $("li").append('<i class="material-icons edit">' + "edit" + '</i>');

    }
}); 

Answer 1

You can use anonymous function in document ready =>

GetData(function(result){
// can do further things here..
console.log(result);

}, passdata);

this should fix your error.

Answer 2

For me this worked

 function GetData(callback) { debugger; $.ajax({ type: 'GET', url: ' http://localhost:3000/users', success: function (response) { console.log(response); callback(response); } }); } 

In another js file call the function back and pass the response parameter for that is where the array of the API was saved.

 GetData(function (response) { debugger; var data = response; var $data = $('#dataDisplay'); $.each(data, function (i, users) { $data.append('<li>' + '<span class="table .table-striped .table-hover">' + users.first_name + '</span>' + ' <span class="table .table-striped .table-hover">' + users.email + '</span>' + ' </li>'); }); //adds li dynamically $("li").append('<i class="material-icons delete ">' + "delete" + '</i>'); $("li").append('<i class="material-icons edit ">' + "edit" + '</i>'); }); }); 

Answer 3

How can JavaScript know that listData is the callback function if you don't specify it?

You just declared the listData function, but you aren't using it anywhere. There is not any sort of magic that will do it for you :)

Just change

var getData = GetData();

To

var getData = GetData(listData, 'something');