Typeahead remote returns two undefined when there is one remote result left

Question

I am building a search for information from a remote json API. I cannot pre-fetch any data as the data set is very large (3000+) and in order to get results for a pre-fetch i would need to provide a single letter query.

The problem I am running in to is that when I get down to one result left in the search, Typehead stops giving me results and only shows two undefined items as the result.

This is what it looks like:

I've tried everything I can think of through the console at this point to try and debug this but cannot find anywhere to see where this data is coming from.

Here is the code for bloodhound and the typeahead initialization.

var items = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.k);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: App.target + "crm/sf/list/item/%QUERY/5",
        filter: function (parsedResponse) {
            return parsedResponse.Listing.list.entries;
        },
    }
});

items.initialize();

$('#itemNoSrch').typeahead(null, {
    autoselect: true,
    displayKey: 'k',
    source: items.ttAdapter()
}).on('typeahead:selected', function (obj, datum, name) {
    App.searchData.itemNo = datum.k.replace("/", "*");

    $('#itemSrchPlaceholder').val(datum.k);
    App.itemInvalid = false;
});

Edit:

Here is the JSON response for crm/sf/list/item/%QUERY/5 where the query is a.

{
"Listing": {
        "list": {
            "entries": [
                {
                    "k": "A-10-10",
                    "v": 1320
                },
                {
                    "k": "A-10-7",
                    "v": 4841
                },
                {
                    "k": "A-10-8",
                    "v": 4821
                },
                {
                    "k": "A14YV4835",
                        "v": 1327
                },
                {
                    "k": "A0554835",
                    "v": 1325
                }
            ]
        }
    }
}

And here is how I can only assume the output is appearing when this is occurring, I used the console on Google chrome's latest stable version.

I would provide a fiddle based on the API but the server does not add cross-origin headers at the moment.

Please let me know of any other information required.

Answer 1

I found the problem! My remote data set was returning as an object instead of an array when it was one result.

The output looked like this.

{
"Listing": {
    "list": {
        "entries": {
            "k": "A-10-10",
            "v": 1320
        }
    }
}

So i added the following in the filter

filter: function (parsedResponse) {
        if(parsedResponse.Listing.list.entries instanceof Array){
            return parsedResponse.Listing.list.entries;
        }else{
            return [parsedResponse.Listing.list.entries];
        }
    },