# (SOLVED) Select Object with Matcher TypeScript Error

**URL:** <https://discourse.aurelia.io/t/solved-select-object-with-matcher-typescript-error/1648>\
**Category:** Help Requests\
**Created:** [September 18, 2018, 10:07pm UTC](https://discourse.aurelia.io/t/solved-select-object-with-matcher-typescript-error/1648 "2018-09-18T22:07:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![clmorales](https://avatars.discourse-cdn.com/v4/letter/c/b2d939/32.png) [@clmorales](https://discourse.aurelia.io/u/clmorales)\
**Post date:** [September 18, 2018, 10:07pm UTC](https://discourse.aurelia.io/t/solved-select-object-with-matcher-typescript-error/1648/1 "2018-09-18T22:07:28Z")

</div>

Hi. I am trying to create a object with matcher.bind and I am getting this error. I am using the same code as in guide.

Error:  
Uncaught TypeError: Cannot read property ‘id’ of null  
at App.productMatcher (webpack-internal:///app:11)  
at \_loop (webpack-internal:///./node\_modules/aurelia-binding/dist/native-modules/aurelia-binding.js:4264)  
at SelectValueObserver.synchronizeOptions (webpack-internal:///./node\_modules/aurelia-binding/dist/native-modules/aurelia-binding.js:4268)  
at MutationObserver.eval (webpack-internal:///./node\_modules/aurelia-binding/dist/native-modules/aurelia-binding.js:4379)

Code used. Copied from guide.

export interface IProduct {  
id: number;  
name: string;  
}

export class App {  
message=“This is Aurelia”;  
products: IProduct[] = [  
{ id: 0, name: ‘Motherboard’ },  
{ id: 1, name: ‘CPU’ },  
{ id: 2, name: ‘Memory’ },  
];

productMatcher = (a, b) =\> a.id === b.id;

selectedProduct: IProduct = { id: 1, name: ‘CPU’ };  
}

Template used: copied from guide

 Select product:  
 Choose... ${product.id} - ${product.name} 

Selected product: {selectedProduct.id} - {selectedProduct.name}

\*\* I tried this in javascript and NO error. Error only in TypeScript.

Thanks

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [September 19, 2018, 12:04am UTC](https://discourse.aurelia.io/t/solved-select-object-with-matcher-typescript-error/1648/2 "2018-09-19T00:04:24Z")

</div>

Can you create a reproduction based on this: [https://stackblitz.com/edit/aurelia-typescript?file=index.ts](https://stackblitz.com/edit/aurelia-typescript?file=index.ts)

---

<div class="post-metadata">

**Author:** ![clmorales](https://avatars.discourse-cdn.com/v4/letter/c/b2d939/32.png) [@clmorales](https://discourse.aurelia.io/u/clmorales)\
**Post date:** [September 19, 2018, 2:52am UTC](https://discourse.aurelia.io/t/solved-select-object-with-matcher-typescript-error/1648/3 "2018-09-19T02:52:25Z")

</div>

Here is the reproduction.

> **[aurelia-typescript-re1fu2 - StackBlitz](https://stackblitz.com/edit/aurelia-typescript-re1fu2)**
>
> Blank starter project for building TypeScript apps.

It is a copy/paste from [https://aurelia.io/docs/binding/selects#select-object-with-matcher](https://aurelia.io/docs/binding/selects#select-object-with-matcher)

Thank for your time

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [September 19, 2018, 4:49am UTC](https://discourse.aurelia.io/t/solved-select-object-with-matcher-typescript-error/1648/4 "2018-09-19T04:49:54Z")

</div>

Your first `<option/>` has a value of null, when the observer try to inspect it and check if values match, it will basically do `null.id`. Easiest is to change your matcher to:

```auto
  productMatcher = (a, b) => a && b && a.id === b.id

```

It will also prevent you from error when you set `selectedProduct` to either `null` / `undefined`

Example [https://stackblitz.com/edit/aurelia-typescript-rjgtua?file=src/app.ts](https://stackblitz.com/edit/aurelia-typescript-rjgtua?file=src/app.ts)

---

<div class="post-metadata">

**Author:** ![clmorales](https://avatars.discourse-cdn.com/v4/letter/c/b2d939/32.png) [@clmorales](https://discourse.aurelia.io/u/clmorales)\
**Post date:** [September 19, 2018, 11:33am UTC](https://discourse.aurelia.io/t/solved-select-object-with-matcher-typescript-error/1648/5 "2018-09-19T11:33:08Z")

</div>

Wao! You are the man. Thank you for your time.