Global Variable returning `undefined` when fetched

Question

Basically, I am running a search query. All parameters, variables, etc work fine. At one point in the success event , I have to run a function that collects the friend request status. This search query is running two api urls, which means I have to import data from another function.

The issue is, I need to save data.sent value so it can be added to the search results . Im am doing this so users aren't spammed with friend quests. However, every method I use, google, and/or experiment with results data.sent in being undefined ..it also is a global variable. I really don't know what else to do.

This is the search query function I've beeing working on. Its all perfect except the part where I run the fetchSTatus function.

$(document).ready(function(){
    var person = new Object(); 
    $.ajax({  
        url: 'http://localhost:3000/customers/',  
        type: 'GET',  
        dataType: 'json',  
        data: person,  
        success: function (data, textStatus, xhr) {
                            
            $('#txt-search').keyup(function(){
                var searchField = $(this).val();
                if(searchField === '')  {
                    $('#filter-records').html('');
                    return;
                }
                
                
                var regex = new RegExp(searchField, "i");
                var output = '<div class="row">';
                var count = 1;
                $.each(data, function(key, val){
                    if(val.name === DefaultName) {
                        return;
                    }
                    
                    if ((val.name.search(regex) != -1) || (val.name.search(regex) != -1)) {
                        output += '<br><h5>' + val.name + '</h5>';
                        output += '<h5>' + val.uuid + '</h5>';
                        
                        fetchSTatus(val.uuid);
                        output += '<h5>' + senderPerson + '</h5>';
                        
                    }
                });
                output += '</div>';
                $('#filter-records').html(output);
            });
            
        },  
        error: function (xhr, textStatus, errorThrown) {  
            document.getElementById('error').style.color = 'red';
            const element = document.getElementById("error");
            element.innerHTML = "Error in Operation";
                            
            return console.log("Error in Operation");  
        }
    });
});

And this is the fectchSTatus function :

function fetchSTatus(x) {
    var person = new Object();
    $.ajax({  
        url: 'http://localhost:3000/friends/' + x ,  
        type: 'GET',  
        dataType: 'json',  
        data: person,  
        success: function (data, textStatus, xhr) {
            
            if(data.sender == Friend1 && data.reciver == x) {
                console.log(data.sender);
                console.log(Friend1);
                console.log(data.reciver);
                console.log(x);
                console.log(data.sent);
            };
            return senderPerson = data.sent;
            console.log(senderPerson);
        },
        error: function (xhr, textStatus, errorThrown) {  
            document.getElementById('error').style.color = 'red';
            const element = document.getElementById("error");
            element.innerHTML = "Error in Operation";
                            
            return console.log("Error in Operation");  
        }
        
    });
    
};

Answer 1

Well, firstly:

return senderPerson = data.sent;
console.log(senderPerson);

wont log anything. The return will exit the function immediately. Note also, you have not declared senderPerson in your code. Finally the value of the return is not being stored anywhere.

You will need to create a global variable at the start of your script:

$(document).ready(function(){
    var person = new Object(); 
    var senderPerson = null;

and then later on do (inside the success function, remove the return):

senderPerson = data.sent;
console.log(senderPerson);