Unable to retrieve value 'includes' from null object

Currently, I am utilizing Vue.js along with JavaScript.

In my code, there is an array of objects named products, each containing a special property called smallest_unit_barcode. My goal is to filter out only those products that have a barcode similar to a given value. To achieve this, I implemented the following 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;
    }

While everything seems to be working smoothly, I encountered an issue when 

obj.smallest_unit_barcode == null
, resulting in the following error message:

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

My concern now is how to overlook the null value while filtering the products array?

javascriptvue.jsvuejs2

Answer №1

Always check for null before trying to access a property:

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

Using the && operator with short circuiting ensures that the right operand is only evaluated if the left operand is true.

Answer №2

The easiest way to achieve this is by utilizing the question mark symbol in combination with the "includes" method.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting an issue with importing a Component in ReactJS using material-ui

Using the material-ui library, I attempted to create a Table following the code provided in the Custom Table Pagination Action example. However, I encountered the following error: Error Encountered: Warning: React.createElement: type is invalid -- expect ...

javascriptreactjsmaterial-ui

Variables are losing their way in the vast expanse of self-submitting

I have a form that needs to be submitted on the same page (index.php) and I want to capture the entered information as a JavaScript variable. <?php $loginid = $_POST[username] . $_POST[password]; ?> Here is some basic code: <script> var pass ...

javascriptphphtmlforms

504 error when attempting to access HTTPS with Node.js

I have encountered an issue with making an https request in my backend node.js web app. The code I am using is as follows: const express = require('express'); const https = require('https'); const app = express(); app.get("/", functio ...

javascriptnode.jsexpresshttps

What is the best way to arrange a GeoJSON features array based on a specific property value?

I need help sorting a GeoJSON file based on a property and then slicing it to keep only the top 5 features. For instance, I want to take this GeoJSON and arrange it in descending order by the incidents property: ... [ -75.1972382872565 ...

javascriptreactjssortinggeojson

Instructions on how to toggle the visibility of a div when hovering over a different a tag

To keep things simple, I'm looking to create a visibility toggle effect on a div when someone hovers over an anchor tag. Similar to the behavior of the four buttons on this example link: The issue I'm facing is that I want the div to appear or b ...

javascriptjqueryhtmlcssjquery-ui

Issues with data retrieval from PHP file in AJAX submission

During my attempts to utilize AJAX for submitting data to a PHP file, I encountered an issue where the submission was successful and I could receive a message echoed back from the PHP file. However, when trying to echo back the submitted data or confirm if ...

javascriptphpjqueryajax

I am consistently encountering the error message: "Error: Unable to locate module './framer'"

I've been running into the same issue repeatedly. I'm in the process of creating a website for a barbershop and I'm attempting to integrate events into a Google calendar using the Google API. I've installed googleapis and framer, but I ...

javascriptnode.jsreactjsgoogle-cloud-platformframerjs

Obtain the dynamic $scope variable within the HTML structure

When creating numerous directives with dynamic scope variables initialized in the link functions, accessing these values within the directive templates can get tricky. For example: // link: function(scope, ele, attr){ scope.key = scope.somevar + 's ...

javascriptangularjsscope

Pictures in the portfolio failing to load on Mozilla Firefox

Having some trouble with my WordPress website bmfconstruction.com.au/new/. In the project section, all images are loading correctly in Chrome, Opera, and IE. However, when it comes to Firefox, none of the images seem to be showing up. I've tested this ...

javascriptcsswordpressimagefirefox

Struggling to launch nuxt application on Digital Ocean due to issues with health checks

I developed a straightforward Nuxt app and successfully pushed it to a GitHub repository from the terminal. Next, I linked my repository to the Digital Ocean app functionality for deployment. Despite a successful build, the launch fails with the following ...

node.jsvue.jsdeploymentnuxt.jsdigital-ocean

Unable to fetch data using getJSON method

objecten.js var objectData = [ { image: 'gallery/objecten/bear.jpg', thumb: 'gallery/objecten/bear.jpg', title: 'my first image', description: 'Lorem ipsum caption&apos ...

javascriptjqueryjson

In search of a hover functionality similar to what can be found on Stack Overflow

I am really impressed by the hover effects on StackOverflow. I would love to incorporate a similar feature into my own web application. Can anyone provide me with more information? What is this feature called? Are there any libraries available for it? I h ...

javascriptjquerytooltipmouseover

What is the best way to determine and showcase the hours that have passed since the user's initial visit to the website?

Can someone provide guidance on how to finalize the hoursSinceFirstVisit() function implementation? Additionally, what content should be displayed on my HTML page? $(document).ready(function() { startTimer(); }); function startTimer() { setInte ...

javascriptjquery

What is the process for adding or modifying attributes in child elements?

I have been experimenting with a simple script that adds the target="_blank" attribute to all the <a> elements. $(function(){ $('a').attr('target', '_blank'); }); While it is functioning perfectly, I am now interested ...

javascriptjquery

JavaScript on the client side or the server side?

I am faced with a challenge on my report page where I need to filter customers based on specific criteria and highlight certain details if their registration date falls after a specified date, such as 1st January 2011. With around 800 records to showcase, ...

javascriptclient-sideserver-side

Ways to extract JSON data from multiple JSON arrays

Within the snippet below, I am attempting to extract the value of women. Right now, I can successfully retrieve 1. Personal care appliances and 2. Jewelry. However, if I try to check any checkbox after that, I encounter an error stating "Uncaught TypeError ...

javascriptjqueryhtmljsonecmascript-6

Unlock the power of Angular pipes in window.open with URL parameters!

<div class="member-img" onclick="window.open(childEpisode.File_URL | fullPath)"> </div> The fullPath function concatenates the domain part to the relative URL stored in file_URL. However, there seems to be an issue as it i ...

javascripthtmlangular

error: local server did not return any data

I am currently using PHP on a Linux machine. In my HTML code, I have set up an AJAX request to the local Apache server (check http://localhost), with the intention of displaying the data from the server on the screen. However, for some reason, nothing is b ...

javascripthtmlajax

What is the best way to trigger a function once another one has finished executing?

After opening the modal, I am creating some functions. The RefreshBirths() function requires the motherId and fatherId which are obtained from the getDictionaryMother() and getDictionaryFather() functions (these display my mothers and fathers on the page s ...

javascripthtmljqueryajaxbootstrap-5

CSS Style in Safari does not conceal Div on Tailwind

When switching the screen from desktop to mobile in ReactJS/Tailwind, I have hidden certain images using the following code: <div className="flex shrink flex-row justify-between w-[60%] h-[25%] sm:w-[95%] sm:h-[52%] mb-[-10px] mt-[-15px] lg:mt-0&qu ...

javascripthtmlcssreactjstailwind-css