typeahead + BloodHound suggestion engine not displaying results from Json and

Question

So, i am using bloodhound suggestion engine and typeahead for a searchBar/suggestionBar that should display the "providerName" (this info is taked from some text inputs) from a JSON that is in a PHP mongo server. The big problem here is that i think it doesn't like the json i am uploading because i have tried with other jsons like this one http://revox.io/json/countries-list.json and it works fine. but with mine it doesn't. The pecularity in here is that when i press "o" in the search bar it displays the json file itself (not talking about the information of it but the JSON FILE itself). At the end i just want the search bar to display the "providerName" the rest is not important for this part

** js script i am using to call the JSON from the php server (it works fine with the countries JSON)**

var providers = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('providerName'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: 'http://localhost:63342/insurancev2/api/apps/inventory/requestProviders.php'
    });
    // initialize the bloodhound suggestion engine
    $scope.countriesOptions = {
        highlight: true
    };
    $scope.providerData = {
        name: 'providersName',
        source: providers
    }
    $scope.provider = null;




}])

the JSON i am uploading

{ "593f280575938b4e020041ff": { "_id": { "$id": "593f280575938b4e020041ff" }, "providerName": "jose", "providerPhone": "898799", "providerEmail": "ajfjafjj", "providerContact": "enriquie", "providerBank": "980988098" }, "59400bfe75938b4a0200420e": { "_id": { "$id": "59400bfe75938b4a0200420e" }, "providerName": "Cafe Duran", "providerPhone": "888-908", "providerEmail": "[email protected]", "providerContact": "KC", "providerBank": "89876798" }, "59413d7c75938bea0a00428e": { "_id": { "$id": "59413d7c75938bea0a00428e" }, "providerName": "cafecito", "providerPhone": "1-581-88", "providerEmail": "jppiipi", "providerContact": "jose", "providerBank": "78909876" }, "59413fff75938bea0a0042a1": { "_id": { "$id": "59413fff75938bea0a0042a1" }, "providerName": "josesillo", "providerPhone": "41515", "providerEmail": "josesgf", "providerContact": "999899", "providerBank": "-98888" }, "594140bf75938bea0a0042a8": { "_id": { "$id": "594140bf75938bea0a0042a8" }, "providerName": "114", "providerPhone": "44141", "providerEmail": "41414", "providerContact": "11414", "providerBank": "1414" }, "594140f575938bea0a0042af": { "_id": { "$id": "594140f575938bea0a0042af" }, "providerName": "a13r41", "providerPhone": "1414", "providerEmail": "1414", "providerContact": "1414", "providerBank": "4141" }, "5941444175938bea0a0042c8": { "_id": { "$id": "5941444175938bea0a0042c8" }, "0": "calcuta", "1": "8987899", "2": "[email protected]", "3": "casaornage", "4": "9876546789" }, "5941458975938bea0a0042e7": { "_id": { "$id": "5941458975938bea0a0042e7" }, "providerName": "saquela", "providerPhone": "cagafe", "providerEmail": "jose", "providerContact": "fqf", "providerBank": "qsfqw" } }

Answer 1

Consider add the display option like bellow. And provide a name is optional.

$scope.providerData = {
    display: 'providersName',
    source: providers
}