Tips for creating ternary operator logic that account for numerous conditions and optional parameters:

Trying to create a logic for my validator functions that involves using objects as errorMaps for input validation. In the code snippet provided, args.drugName is an optional field. If the user provides text, we want to ensure it is greater than 3 letters; otherwise, if it's empty, the success condition should be considered valid. How can we address this issue for optional parameters in TypeScript?

main.js

   {
                errorKey: ValidationErrorEnum.InvalidDrugName,
                successCondition: (args: DrugPriceParam) => {
                    let isValid: boolean = false;
                    isValid = args.drugName.length >= 3 ? true : _.isEmpty(args.drugName) ? true : false;

                    // if (args.drugName && args.drugName.length >= 3) {
                    //         isValid = true;
                    // } else if (_.isEmpty(args.drugName)) {
                    //     isValid = true;
                    // }
                    return isValid;
     }

Error:

error TS2532: Object is possibly 'undefined'.
javascriptangulartypescript

Answer №1

One way to streamline the validation process is by writing the check as follows:

return !args.medication || args.medication.length > 2;
//     check for empty input
//                             check if input is longer than two characters

Answer №2

When writing a condition, it is similar to an if statement

(args.drugName && args.drugName.length >= 3) ? true : _.isEmpty(args.drugName) ? true : false;

A new feature in JavaScript called optional chaining is on the horizon. Currently, you can use this feature with a webpack plugin. https://github.com/tc39/proposal-optional-chaining

With optional chaining, we can simplify the code like this:

args?.drugName?.length >= 3 ? true : _.isEmpty(args.drugName) ? true : false;

Answer №3

Instead of using the ternary operator to return booleans, you can simplify your code by passing the result of the comparison operations directly:

// if (args.drugName && args.drugName.length >= 3) {
//     isValid = true;
// } else if (_.isEmpty(args.drugName)) {
//     isValid = true;
// }

// Simplified version:

isValid = (args.drugName && args.drugName.length >= 3) || _.isEmpty(args.drugName);

Remember about short-circuiting as well: If the first condition in the || statement is true, then the second part won't be evaluated (similarly for &&, if the first condition is false).

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

What is the best way to transfer the "user" object from TopBar.js to App.js in my project?

In my project, TopBar.js functions as an AppBar component responsible for handling user authentication. When a user logs in, I receive an object called "user". My goal is to export this "user" object to App.js. If I am successful in exporting it to App.js ...

javascriptreactjsfirebasefirebase-realtime-databasefirebase-authentication

Unable to successfully delete all channels in discord.js

I'm currently working on a bot designed to delete all channels within a Discord server. Here is the code I have written: const { Client, GatewayIntentBits } = require("discord.js"); const client = new Client({ intents: [ GatewayIntent ...

javascriptnode.jsdiscorddiscord.js

Best methods for deleting an element's attribute or style attribute

Imagine this snippet of CSS code: .notif-icon { display: inline-block; } In my HTML, I have the following element which starts off hidden by overriding the display property of the notif-icon class: <span id="error" class="notif-icon& ...

javascripthtmlcss

Exploring how Node.js, Express.js, and Mongoose work together to handle

I am experiencing difficulties with handling data received from APIs, as it returns null and doesn't wait even though I have used async/await functions. My goal is to retrieve data from the first URL, then gather data from other URLs based on the res ...

javascriptnode.jsexpressmongoose

Challenge encountered with TypeScript integration in the controller

I am currently in the process of converting a website from VB to C# and incorporating TypeScript. I have successfully managed to send the data to the controller. However, instead of redirecting to the next page, the controller redirects back to the same pa ...

c#ajaxasp.net-mvctypescript

Storing the ID passed from Next.js/Link into Next.js

I'm encountering some issues with the current flow setup. I have a component ArticleList that listens to articles, and upon clicking on it, redirects you to the individual article page. The redirection is done using next/Link, where the id is passed a ...

javascriptreactjsnext.js

Send the value to the <input> tag following each iteration in the functions

I am currently utilizing BootstrapVue. In my code, I have implemented a for loop to retrieve unique numbers from an array, which are stored as this.number. For each iteration of the loop, I use input.push() to add a new b-form-input element (in this case, ...

javascriptvue.jsvuejs2bootstrap-vue

Why is receiving input value in React not successful?

Attempted to retrieve input value when user clicks search, but encountered difficulties. var Login = React.createClass({ getInitialState: function () { return {name: ''}; }, handleSearch(){ alert(this.state.name); // Why isn't ...

javascriptreactjsecmascript-6

Issue with React useCallback not being triggered upon a change in its dependencies

useCallback seems to be capturing the wrong value of its dependency each time. const [state, setState] = React.useState(0); const callback = React.useCallback(() => { console.log(state); // always prints 0, why? }, [state]); React.useEffec ...

javascriptreactjstypescriptreact-hooks

Ways to implement variables in Jade that are transmitted through res.render

Firstly, I would like to apologize for any errors in my English. In my router file, I have the following code: exports.index = function (req, res) { res.render('./game/main', {name:req.session.name, menuOp:'Home'}); } Additionally, ...

javascriptnode.jspug

Display a loading progress bar with jQuery AJAX as your single page website content loads

I am currently working on a simple web page layout that consists of a navigation bar at the top and a body wrapper. Whenever a user clicks on a link in the navigation bar, I use .load to load the content of the page into the wrapper div. $(this).ajaxStar ...

phpjavascriptjqueryajaxprogress-bar

Adjust the minimum time in ngb-timepicker in Angular version 4

I created a straightforward form for selecting a time range using the code snippet below: <form [formGroup]="editEventForm" (ngSubmit)="c(onSubmitUpdate())"> <div class="form-group bottom-form-details"> <div class="row"> < ...

angularangular2-formstimepickerng-bootstrap

Instructions on changing the color and font weight of an asterisk within a Textfield using Material UI

Is there a way to style the asterisk in red and bold within a Textfield using material UI? I have a placeholder text without a label, as my label is null or empty. I would like to make the placeholder star RED. Is this possible? Here is the code snippet: h ...

javascriptreactjsreact-hooksmaterial-uimaterial-design

Recursive methodology for building DOM tree structure

var div = { element:'div', parent:'body', style: { width:'100px', height:'100px', border:'1px solid black' } child: { element:'input', type:'text', ...

javascript

Having trouble deleting multiple rows with ng-repeat in datatables

Having followed the instructions in this post, I quickly integrated it with jquery datatables. However, the functionality is not as expected. When attempting to delete rows, they do not get deleted. Furthermore, if I navigate to the next page and return, ...

javascriptjqueryangularjsdatatable

Cannot access assets: Angular 8 deployment on Tomcat 9.0.30 is prevented due to an invalid MIME type ("text/html")

I am currently working on a project that involves an angular 8 user interface and a springboot java backend. The project is structured as a multi module project, with the angular portion in a separate module. To build the angular code into a single executa ...

angularspringspring-bootangular8tomcat9

Unable to find JSON data using the Javascript Kafka Magic Tool, as no results are being

In JSON format, I have a message that contains various details. My goal is to utilize Javascript search functionality to identify if the EmailAddress matches the specific value I am looking for within hundreds of similar messages: "Message": { ...

javascriptjson

Error message: "Mismatched data types in Formik errors when utilizing TypeScript"

I have a customized input component for formik which includes an error label if one exists. When I print it like this: {errors[field.name]}, it works. However, {t(errors[field.name]?.toLocaleString())} does not work. import { FieldProps, FormikErrors } ...

typescriptformikreact-i18next

Issue with serving static files in ExpressJs

I'm facing an issue with my Express app where the static files are not working properly for certain routes. For example, when I visit '/', all styles and images load correctly as expected when the index.ejs is rendered. However, when I navi ...

javascriptexpress

Troubleshooting Bootstrap 4 Modal in JavaScript and Vue: Uncaught ReferenceError: $ is not defined

I'm struggling to figure out how to trigger a Bootstrap 4 modal from my Vue 3 app using JavaScript. Whenever I try to launch the modal, I keep encountering this error message: $ is not defined at eval When looking for solutions, I noticed that most a ...

javascriptvue.jsbootstrap-4