javascript - Cannot read property 'includes' of null" - Stack Overflow

I'm using Vue.js with JavaScript.

I have an array of objects called products and every object has the property called smallest_unit_barcode. I want to filter only products with barcode like value, so I did this function:

if (value != '') {
    var results = this.products.filter(obj=>obj.smallest_unit_barcode.includes(value));
    var results = results.slice(Math.max(results.length - 20, 0))
    this.pos_quick_lunch = results;
}

Everything works fine, but if obj.smallest_unit_barcode == null, I get this error:

Error in v-on handler: "TypeError: Cannot read property 'includes' of null"

How can I ignore the null value when filtering the products array?

I'm using Vue.js with JavaScript.

I have an array of objects called products and every object has the property called smallest_unit_barcode. I want to filter only products with barcode like value, so I did this function:

if (value != '') {
    var results = this.products.filter(obj=>obj.smallest_unit_barcode.includes(value));
    var results = results.slice(Math.max(results.length - 20, 0))
    this.pos_quick_lunch = results;
}

Everything works fine, but if obj.smallest_unit_barcode == null, I get this error:

Error in v-on handler: "TypeError: Cannot read property 'includes' of null"

How can I ignore the null value when filtering the products array?

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Jul 3, 2020 at 18:30 garraflavatra 7766 bronze badges asked Jul 3, 2020 at 11:08 softyasoftya 15811 gold badge99 silver badges2929 bronze badges 1

• if ( obj.smallest_unit_barcode === null) ... else ... – Andreas Commented Jul 3, 2020 at 11:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

Compare against null before you try to access the property:

obj => obj.smallest_unit_barcode !== null && obj.smallest_unit_barcode.includes(value)

Because && is short circuiting, the right operand won't be evaluated if the left operand evaluates to false.

Simple answer is, You can use ? with includes

if (value != '') {
    var results = this.products.filter(obj=>obj?.smallest_unit_barcode?.includes(value));
    var results = results.slice(Math.max(results.length - 20, 0))
    this.pos_quick_lunch = results;
}