Cannot read property 'includes' of null"

Question

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?

Answer 1

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.