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() {
            $.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))