What I'm trying to do is to get a json object via Ajax and populate the Bootstrap Typeahead with just one kind of value.
Here is my code:
nameTypeHead: function () {
var _self = this,
searchInput = $('#nameTypeHead'),
arr = [];
function getArray() {
$.ajax({
url: '/Home/AutoComplete',
type: 'post',
dataType: 'json',
data: { searchText: searchInput.val() },
success: function (data) {
$.each(data, function () {
arr.push(this.Name);
});
return arr;
}
});
}
searchInput.typeahead({
source: getArray()
});
}
I receive the error that arr is null
I also tried with .parseJSON()
but with no success:
$.each($.parseJSON(data), function () {
arr.push(this.Name);
});
What can I do to show just the value Name of my Json Object in the Typeahed?
If in the Ajax Success I put alert(JSON.stringify(data));
it alert correctly my Json Object.
I made it from scratch:
$("#typeahead").typeahead({
source: (query, process) =>
$.getJSON("path/to/lookup", { query }, process),
});
Where data
is a simple JSON array like:
["John", "Jane", "Alfredo", "Giovanni", "Superman"];
If your data
array has got a different structure, just rearrange it before passing it to process()
method.
You can find a live example here.
EDIT - based on your json data:
[
{'id':'0', 'name':'John'},
{'id':'1', 'name':'Jane'},
{'id':'2', 'name':'Alfredo'},
...
}
The getJSON
callback becomes instead:
(data) => process(data.map((x => x.name))