title: Why is AJAX/JSON response undefined when used in Bootstrap typeahead function?
body: <p>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 (<code>console.log</code>).</p>
  
  <pre><code>function getJSONCustomers()
  {
  var response =  $.ajax({
      type: "GET",
      url: "getCustomers.php",
      dataType: "json",
      async: false,
      cache: false
    }).responseText;
    return response;  
  };
  </code></pre>
  
  <p>However, when I set a variable to contain the output of that function call:</p>
  
  <p><code>var mydata = getJSONCustomers();</code></p>
  
  <p>, then try to use it within my <strong>Twitter-Bootstrap TypeAhead</strong> function (autocomplete for forms): </p>
  
  <pre><code>data = mydata;
  console.log(data);
  </code></pre>
  
  <p>I get an 'undefined' error in my console.  </p>
  
  <p>Below is a snippet of this code:</p>
  
  <pre><code>$(document).ready(function() {
  
  var mydata = getJSONCustomers();
  
  $('#Customer').typeahead({
      source: function (query, process) {
          customers = [];
          map = {};
  
          data = mydata;
          console.log(data);
  
   // multiple .typeahead functions follow......
  });
  </code></pre>
  
  <p>Interesting here, is that if I set the data variable to be the hardcoded JSON string returned from the AJAX function, everything works fine:</p>
  
  <pre><code>data = [{"CustNameShort": "CUS1", "CustNameLong": "Customer One"}]
  </code></pre>
  
  <p>How can I use the JSON string within my typeahead function?</p>