Why is AJAX/JSON response undefined when used in Bootstrap typeahead function?
javascript, jquery, json, twitter-bootstrap
Solution
`.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.
Problem
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?