Parsing data in angular typeahead component not working

Question

I am using AngularJS Bootstrap typeahead component to display data from an array of objects. The problem is that i keep on getting the following error even though my data is being return from my api call.

TypeError: Cannot read property 'length' of undefined

Here is what the controller looks like at the moment.

$scope.companySearch = function(val) {
    LeadsService.getCompany(val)
        .then(function(resp) {
            return resp.resp;
        });
};

and the directive

 <input typeahead="company as item.company_name for item in companySearch($viewValue)" id="companyName" name="company_name" type="text" class="form-control input-md" ng-model="companyDetails.company_name" typeahead-wait-ms="200" required>

Finally her is the data that im trying to fetch;

[{"id":2,"company_name":"Test Company","address1":"abc","address2":"def","po_box":"1234","city_id":2,"email":"[email protected]","phone":"9898","fax_no":9798,"website":"www.jgjh.com","corporate_code":null,"contact_person_first_name":"First","contact_person_last_name":"Last","contact_person_phone":"98989","contact_person_email":"[email protected]"},{"id":3,"company_name":"Test Company","address1":"abc","address2":"def","po_box":"1234","city_id":2,"email":"[email protected]","phone":"9898","fax_no":9798,"website":"www.jgjh.com","corporate_code":null,"contact_person_first_name":"First","contact_person_last_name":"Last","contact_person_phone":"98989","contact_person_email":"[email protected]"},{"id":4,"company_name":"Test Company","address1":"abc","address2":"def","po_box":"1234","city_id":2,"email":"[email protected]","phone":"9898","fax_no":9798,"website":"www.jgjh.com","corporate_code":"17","contact_person_first_name":"First","contact_person_last_name":"Last","contact_person_phone":"98989","contact_person_email":"[email protected]"},{"id":5,"company_name":"Test Company","address1":"abc","address2":"def","po_box":"1234","city_id":2,"email":"[email protected]","phone":"9898","fax_no":9798,"website":"www.jgjh.com","corporate_code":"17","contact_person_first_name":"First","contact_person_last_name":"Last","contact_person_phone":"98989","contact_person_email":"[email protected]"},{"id":6,"company_name":"Test Company","address1":"abc","address2":"def","po_box":"1234","city_id":2,"email":"[email protected]","phone":"9898","fax_no":9798,"website":"www.jgjh.com","corporate_code":"18","contact_person_first_name":"First","contact_person_last_name":"Last","contact_person_phone":"98989","contact_person_email":"[email protected]"},{"id":7,"company_name":"Test Company","address1":"abc","address2":"def","po_box":"1234","city_id":2,"email":"[email protected]","phone":"9898","fax_no":9798,"website":"www.jgjh.com","corporate_code":"19","contact_person_first_name":"First","contact_person_last_name":"Last","contact_person_phone":"98989","contact_person_email":"[email protected]"},{"id":8,"company_name":"Test Company","address1":"abc","address2":"def","po_box":"1234","city_id":2,"email":"[email protected]","phone":"9898","fax_no":9798,"website":"www.jgjh.com","corporate_code":"20","contact_person_first_name":"First","contact_person_last_name":"Last","contact_person_phone":"98989","contact_person_email":"[email protected]"},{"id":9,"company_name":"Test Company","address1":"abc","address2":"def","po_box":"1234","city_id":2,"email":"[email protected]","phone":"9898","fax_no":9798,"website":"www.jgjh.com","corporate_code":"21","contact_person_first_name":"First","contact_person_last_name":"Last","contact_person_phone":"98989","contact_person_email":"[email protected]"},{"id":10,"company_name":"Test Company","address1":"abc","address2":"def","po_box":"1234","city_id":2,"email":"[email protected]","phone":"9898","fax_no":9798,"website":"www.jgjh.com","corporate_code":"22","contact_person_first_name":"First","contact_person_last_name":"Last","contact_person_phone":"98989","contact_person_email":"[email protected]"},{"id":11,"company_name":"Test Company","address1":"abc","address2":"def","po_box":"1234","city_id":2,"email":"[email protected]","phone":"9898","fax_no":9798,"website":"www.jgjh.com","corporate_code":"23","contact_person_first_name":"First","contact_person_last_name":"Last","contact_person_phone":"98989","contact_person_email":"[email protected]"}]

If it helps, i get the error before my promise is returned.

companySearch doesn't return anything.

a better oliver
– a better oliver

2015-06-11 20:59:01 +00:00
Commented Jun 11, 2015 at 20:59 — a better oliver
– a better oliver, Commented Jun 11, 2015 at 20:59

ReeganLourduraj · Accepted Answer · 2015-06-11 21:05:25Z

1

Try with this code for Typeahead asynchronous loading data

$scope.companySearch = function(val) {
    return LeadsService.getCompany(val)
        .then(function(resp) {
            return resp.data;
        });
};

answered Jun 11, 2015 at 21:05

ReeganLourduraj

8736 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

allienx · Accepted Answer · 2015-06-11 20:59:23Z

0

Try this:

$scope.companySearch = function(val) {
    return LeadsService.getCompany(val)
        .then(function(resp) {
            return resp.resp;
        });
};

Which returns the promise directly to the typeahead directive. typeahead will wait for the data to be resolved.

answered Jun 11, 2015 at 20:59

allienx

8876 silver badges10 bronze badges

1 Comment

allienx Over a year ago

No problem. I ran into the same issue

Collectives™ on Stack Overflow

Parsing data in angular typeahead component not working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related