Throwing toLowerCase of null

[vgogov]

I have a service that hits elasticsearch and brings back arrays of data. Searching works fine but sometimes just by searching text it throws the following error:

CompleterCmp.html:17 ERROR TypeError: Cannot read property 'toLowerCase' of null.

The line 17:

<div class="completer-item-text" [ngClass]="{'completer-item-text-image': item.image || item.image === '' }">

Here is a sample of what comes back from the backend:

Object {items: Array(100), pageSize: 100, pageNo: 0, numResults: 180} and the items array holds these objects with two fields:

0:Object{ id:"8815651845852" name:"github.jpg" }

I'm using custom data and here is a snippet:

this.http.post(this.baseUrl + "?from=" + page + "&size=" + pageSize, request) .map((res: Response) => { // Convert the result to CompleterItem[] let data = res.json(); console.log(data) let matches: CompleterItem[] = data.items.map((items: any) => this.convertToItem(items)); this.next(matches);

Then in convertToItem method:

public convertToItem(data: any): CompleterItem | null { if (!data) { return null; } // data will be string if an initial value is set return { title: typeof data === "string" ? data : data.name } as CompleterItem; }

Note that search still works and still brings back array of objects but the dropdown stops working. Any ideas on what might be causing this?

Update: I noticed one of the objects in the array had an title of null.

[vgogov]

Fixed by checking for nulls and ignoring them or setting to random value.