Oops! Looks like the JavaScript code encountered a problem: "Unable to convert undefined to lowercase."

I encountered an issue while coding this script in Nuxtjs. When I try to filter a list of users based on a keyword search, it throws an error.

<script>
    export default {
        computed: {
            user() {
                let user = [{name_en: 'Jack'},{name_en: 'Joe'}]
                return user.filter(item => item.name_en.toLowerCase().includes(keywordSearch))
            }
         }
     }
</script>

The error message states Cannot read property 'toLowerCase' of undefined in javascript. However, when I change the filter condition to check for 'Jack' specifically, there is no error.

return user.filter(item => item.name_en === 'Jack')

This inconsistency is confusing me. How can I resolve this issue?

Answer №1

For checking the existence and converting to lowercase, this function can be used:

user.filter(item => item.name_en && item.name_en.toLowerCase().includes(keywordSearch))

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

Fixing the department display list in React Hook: A step-by-step guide

{ roomDept.map((item, index) => ( <div key={index} className="flex flex-col pb-2 items-center"> <div className="flex pb-2 w-full"> <SelectPick ...

Having trouble retrieving the value of an object in Angular

I have an AngularJS factory named 'userFactory' that I'm using: app.factory('userFactory', function($window) { var auth = { isLogged: false, user: "a", check: function() { if ($window. ...

Are you harnessing the power of Ant Design's carousel next and previous pane methods with Typescript?

Currently, I have integrated Ant Design into my application as the design framework. One of the components it offers is the Carousel, which provides two methods for switching panes within the carousel. If you are interested in utilizing this feature using ...

Refreshing chosen value (html) utilizing buttons

In my code, I have a Select that allows me to choose the number of a chapter I want to display (see image): <select name="select" onchange="javascript:sliders[0].goTo(value);"> <?php for($i=1; $i<$row['nbChapitre']+1; $i++){ ?> ...

Tips on retrieving and refreshing dynamically generated PHP file echo output within a div

I have a div that I'm refreshing using jQuery every 10 seconds. The content is being read from a PHP file named status.php. Here is the JavaScript and HTML for the div: <script> function autoRefresh_div() { $("#ReloadThis").load("status.php ...

Arrange the array in chronological order based on the month and year

I'm looking for assistance with sorting an array by month and year to display on a chart in the correct order. Array1: ['Mar19','Apr18','Jun18','Jul18','May18','Jan19'....]; Desired Output: ...

What is the best way to adjust the size of an image to the viewing area

In my application, users can take photos either horizontally or vertically. These images are then displayed in a gallery on a webpage, and when clicked on, they expand using a Modal. My issue arises with horizontal images looking smaller than vertical one ...

Creating vibrant squares using HTML and CSS

My objective is to incorporate 3 input options for selecting the color, size, and amount of cubes. The image below showcases my peer's final project, but unfortunately, he refused to share the code with me. We were given a basic template to begin with ...

Exploring the Validation of POST Requests with JSON Content

When working with NodeJS and Express 4, I often come across situations where the client sends JSON data that needs to be processed: { "data" : "xx" "nested" : { field1: "111", field2: "222" } } However, on the server side, I ...

Emphasize an element when hovering over it

I am looking to create a custom hover effect for highlighting elements in a Chrome extension I'm developing. The goal is to achieve a similar behavior to using the magnifying glass tool in Chrome Dev Tools, where only the hovered element is highlighte ...

What is the best way to send a variable to an event listener?

Forgive me if my issue seems insignificant to those well-versed in JS. I've developed an image carousel and am working on linking a thumbnail to a full-size image, so that when a user clicks on the thumbnail, the larger image appears in another sectio ...

Having trouble implementing highlighting functionality for a WebElement in Selenium with JavascriptExecutor on Firefox version 35

During the execution of a script designed to highlight and reset a WebElement in selenium 2.43: public void highlightElement(WebElement element) { String originalStyle = element.getAttribute("style"); JavascriptExecutor js = (JavascriptExecutor) sele ...

Displaying a JSON object in a component's state through appending

I am currently working with a function that takes the state of an object as input and performs various operations on it. After these operations, I need to update the state accordingly and display it in JSON format. Here is the initial state: state= { ...

Incorporate a new class into the direct parent element using Angular

I am facing a scenario where an element is dynamically assigned a class. My goal is to append a new class to its parent element only if the child element has a specific class. <a [ngclass]="addClassHere"> //need to add class here if child h ...

Understanding the mechanisms of Promise functionality within Typescript can be challenging, particularly when encountering error messages such as "type void is not

Recently, I've delved into the world of Typescript. Despite my efforts to stay true to the typing system, I've encountered a challenge that forces me to resort to using the any type: The issue arises with a function that returns a promise: sav ...

Is it possible for a single field to validate and accept multiple types of data?

As a newcomer to Yup, I am attempting to validate a field that can be either a string following a specific regular expression or an array of such strings. Below is a functional example of validating a string that matches the regex: { field: yup.string(). ...

Effective ways to resolve the ajax problem of not appearing in the console

I am facing an issue with my simple ajax call in a Java spring boot application. The call is made to a controller method and the returned value should be displayed in the front-end console. However, after running the code, it shows a status of 400 but noth ...

The AppBar in a secondary color is looking sleek and modern with the Select component

I am currently utilizing version 33 of material-ui-next: import * as mui from 'material-ui'; Within a component, I have an AppBar featuring a ToolBar and a Select: render() { return ( <mui.AppBar color="secondary"> <mui.To ...

Retrieving the value of an inputtext component in PrimeFaces using jQuery

I have the following code snippet: <h:form id="calcForm"> <h:panelGrid columns="3" styleClass="panelGridNoBorder"> <p:inputText id="value" /> <p:commandButton value="calculate " onclick="calc()" /> </h:panelGrid> ...

The 'xxxxx' term cannot be found within an undefined value when using the 'in' operator in Vue.js

Does anyone have experience creating a modal form for adding a record? I am able to display default values from data, but whenever I try to modify a field, I encounter the following error: *vue.min.js:6 TypeError: Cannot use 'in' operator to se ...