Ayeye Brazo Ayeye Brazo - 1 year ago 189
jQuery Question

Ajax call populate Typeahead Bootstrap

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() {
url: '/Home/AutoComplete',
type: 'post',
dataType: 'json',
data: { searchText: searchInput.val() },
success: function (data) {
$.each(data, function () {
return arr;

source: getArray()

I receive the error that arr is null

I also tried with
but with no success:

$.each($.parseJSON(data), function () {

What can I do to show just the value Name of my Json Object in the Typeahed?

If in the Ajax Success I put
it alert correctly my Json Object.

Answer Source

I made it from scratch:


    source: function (query, process) {
        return $.getJSON(
            { query: query },
            function (data) {
                return process(data);


Where data is a simple JSON array like:


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:

function (data) {

    var newData = [];

    $.each(data, function(){



    return process(newData);

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download