Javascript function returns undefined when called from another function

Question

When I call a function within a function it returns undefined. When the function is called by itself it returns the data I expect it to return.

The functions:

function companyNumbers(account_id) {
    $.ajax({
        type: "GET",
        url: "http://example.com/api/api_client_relationships/" + account_id,
        dataType: 'json',
        success: function(data) {
            for(var i=0;i<data.length;i++){
                console.log(companyNames(data[i].company_id)); // returns undefined
            }
        }
    });
}

function companyNames(id) {
    $.ajax({
        type: "GET",
        url: "http://example.com/api/api_company_names/" + id,
        dataType: 'text',
        success: function(data) {
            return data; // returns valid result when not called within another function
        }
    });
}

data[i].company_id is just a value parsed from the returned json response. It acts as the argument passed to the companyNames function.

Asynchronous calls are not synchronous! – epascarello May 06 '14 at 17:32 — epascarello, May 06 '14 at 17:32

score 2 · Accepted Answer · answered May 06 '14 at 17:33

You're trying to return a value from an asynchronous callback. return data inside the callback won't return data back to the caller of companyNames. Instead, pass in a callback to companyNames and return the data through that:

function companyNames(id, callback) {
    $.ajax({
        type: "GET",
        url: "http://example.com/api/api_company_names/" + id,
        dataType: 'text',
        success: function(data) {
            callback(data);
        }
    });
}

Then companyNumbers becomes:

function companyNumbers(account_id) {
    $.ajax({
        type: "GET",
        url: "http://example.com/api/api_client_relationships/" + account_id,
        dataType: 'json',
        success: function(data) {
            for(var i=0;i<data.length;i++){
                companyNames(data[i].company_id, function(data) {
                    console.log(data);
                });
            }
        }
    });
}

Thank you. I'm still learning the difference between asynchronous and synchronous calls in javascript. Very helpful. — Stephen Howells, May 06 '14 at 17:50
I was scratching my head over this, thank @Vivin for your reply, resolved my issue within 5 mins of reading your solution. — Aditya, Jan 30 '23 at 16:18

score 0 · Answer 2 · answered May 06 '14 at 17:34

Welcome to the world of ajax, you can't leave browser waiting for the return, as its async. Instead, you should use a callback function:

companyNames(data[i].company_id, function(info){console.log(info)});

function companyNames(id, call_back) {

success: function(data) {
        call_back(data); // returns valid result when not called within another function
    }

score 0 · Answer 3 · answered May 06 '14 at 17:37

This is because function companyNames starts an asynchronous process. It returns immediately after starting the ajax call, and it's return value is undefined because the function itself doesn't specify a return value, just a function to call once the ajax call actually completes.

Javascript function returns undefined when called from another function

3 Answers3