Why is AJAX/JSON response undefined when used in Bootstrap typeahead function?

Question

I created a function that makes a jquery AJAX call that returns a JSON string. On its own, it works fine -- and I can see the JSON string output when I output the string to the console (console.log).

function getJSONCustomers()
{
var response =  $.ajax({
    type: "GET",
    url: "getCustomers.php",
    dataType: "json",
    async: false,
    cache: false
  }).responseText;
  return response;  
};

However, when I set a variable to contain the output of that function call:

var mydata = getJSONCustomers();

, then try to use it within my Twitter-Bootstrap TypeAhead function (autocomplete for forms):

data = mydata;
console.log(data);

I get an 'undefined' error in my console.

Below is a snippet of this code:

$(document).ready(function() {

var mydata = getJSONCustomers();

$('#Customer').typeahead({
    source: function (query, process) {
        customers = [];
        map = {};

        data = mydata;
        console.log(data);

 // multiple .typeahead functions follow......
});

Interesting here, is that if I set the data variable to be the hardcoded JSON string returned from the AJAX function, everything works fine:

data = [{"CustNameShort": "CUS1", "CustNameLong": "Customer One"}]

How can I use the JSON string within my typeahead function?

Answer 1

.responseText returns a string. You have to parse the string first to be able to work with the array:

var mydata = JSON.parse(getJSONCustomers());

That being said, you should avoid making synchronous calls. Have a look at How do I return the response from an asynchronous call? to get an idea about how to work with callbacks/promises.