Is it possible in TypeScript to convert a nested ternary into a standalone statement?

I encountered an error while working with the code snippet provided below. As I am relatively new to nested ternary operations, I would appreciate any assistance you could provide. Here is the example code:

  get notEmptyProduct(): string[] {
    return this.contractSettings.allowedRegularEstimateProducts && this.contractSettings.allowedRegularEstimateProducts.length ? this.contractSettings.allowedRegularEstimateProducts : this.contractSettings.allowedControlEstimateProducts && this.contractSettings.allowedControlEstimateProducts.length ? this.contractSettings.allowedControlEstimateProducts : [];
  }

Please separate this nested ternary operation into its own statement.

javascripttypescript

Answer №1

Consider separating nested ternaries into their own variables for improved readability.

retrieveProductList(): string[] { 
const controlEstimateProducts = this.contractSettings.allowedControlEstimateProducts && this.contractSettings.allowedControlEstimateProducts.length ? this.contractSettings.allowedControlEstimateProducts : [];
const regularEstimateProducts = this.contractSettings.allowedRegularEstimateProducts &&  this.contractSettings.allowedRegularEstimateProducts.length ?     this.contractSettings.allowedRegularEstimateProducts : controlEstimateProducts;
return regularEstimateProducts;
}

Answer №2

Utilizing Optional chaining in JavaScript can help handle Falsy and Truthy values efficiently. By adding an empty array at the end, we ensure that it returns a default value when the method's return type does not comply with expectations. This approach is preferred over using nested ternary operators.

  get notEmptyProduct(): string[] {
    return (this.contractSettings.allowedRegularEstimateProducts?.length && this.contractSettings.allowedRegularEstimateProducts) || (this.contractSettings.allowedControlEstimateProducts?.length && this.contractSettings.allowedControlEstimateProducts) || [];
  }

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

Adjust the ZIndex on a div through interactive clicking

For my new project, I'm exploring a concept inspired by Windows 7. The idea is that when you double click on an icon, a window will open. If you keep double clicking on the same icon, multiple windows should appear. The challenge I'm facing is im ...

javascripthtmlcssz-index

When running 'npm run dev', an error occurred after the SizeLimitsPlugin emitted at 98%. The specific dependency that was

I encountered an issue while trying to incorporate Google Maps into my Laravel project and received the following error message after running npm run dev: 98% after emitting SizeLimitsPlugin ERROR Failed to compile with 1 errors 10:52:34 PM This dependen ...

javascriptnode.jsnpmwebpacksass

javascript method to apply styling

I'm puzzled by how these two javascript/css codes can yield different results: 1st: prev.setAttribute('style', 'position:absolute;left:-70px;opacity:0.4;border-radius: 150px;-webkit-border-radius: 150px;-moz-border-radius: 150px;&apos ...

javascriptcsssetattribute

What are some creative ways to customize and animate the cursor or caret within an input field?

Just to clarify, I am working with React and Material-UI. I have a task at hand where I need to modify the appearance of the caret within an input element by adding an animation to it. I have managed to change its color using caret-color and set a default ...

javascripthtmlcsssassmaterial-ui

Tips for creating class variables with default values that are more complex than simple flat values

Creating a simple flat class like this functions smoothly: class Test { company_name: string = ""; company_id: number = 0; company_website: string = ""; } When I instantiate it with let product = new Test(), everything works as anticipated, and prod ...

typescript

Items expand and move seamlessly between two columns

My website features a Bootstrap accordion that I have organized into a two-column layout using the following CSS: #accordion { column-count: 2; } .card { margin: 0px 20px 20px 20px; break-inside: avoid-column; -webkit-column-break-inside: avoid; ...

javascriptjqueryhtmlcssbootstrap-4

What is the process for implementing a component in antdesign when using vue-cli and vue 3?

I followed the instructions provided in the documentation here. These are the steps I took: vue create example-app cd example-app I selected the vue 3 preset. Then, I made changes to the script in main.js import Vue from 'vue'; import Button f ...

javascriptvue.jsantd

Having trouble uploading an image to AWS using Angular and NodeJS?

I am currently working on a Node/Express application and I need to gather file information for uploading from an Angular/Ionic front end. To achieve this, I have created a separate Service in Angular that successfully retrieves the Image name. However, my ...

javascriptangularjsnode.jsamazon-web-servicesinput

Is it possible to utilize an enum for typing an array variable?

Is there a way to use an enum to define the valid types that an array can contain? I have been unable to find a solution so far, and I am curious if it is feasible. Below is the example code I have tried: interface User { name: string; } interface Ad ...

typescript

Creating a custom Map type in TypeScript

I am exploring the concept of defining a Map type in Typescript using generics. Essentially, I want to create something similar to: EntityMap<U, V>, where U can only be either a string or a number This is what I have managed to come up with so far: ...

angularjstypescripttypescript-generics

Clearing the ng-model value in a controller following an ng-change event

Is there a way to reset the ng-model value in the controller after an ngChange event without needing to use a directive? <div ng-repeat="i in items"> <!-- Some DOM comes here --> <select ng-model="i.avail" ng-change="changeAvail(i. ...

javascriptangularjsangularjs-ng-repeatangularjs-ng-model

What is the best way to incorporate dynamic data from Firestore into a function using the `where()` method, while also utilizing the `snap.size` property to accurately count the total number of queries

I am facing an issue while trying to fetch data dynamically from firestore using a where() function. The specific error message I encountered is: TypeError: vaccines is not a function The user collection: [![enter image description here][1]][1] Here a ...

javascriptreactjsfirebasegoogle-cloud-firestore

Angular 2 Validation Customizer

Recently, I created a web API function that takes a username input from a text field and checks if it is already taken. The server response returns Y if the username is available and N if it's not. For validating the username, I implemented a Validat ...

formsangularvalidationtypescript

What is the most effective method for deleting outdated messages or posts from a collection?

I'm facing a challenge on this website that prioritizes answers over discussions. I need guidance on how to effectively handle the removal of old messages stored in a collection, considering the high volume of messages involved. Currently, my approac ...

javascriptmongodbmeteor

Tips for successfully sending a nested function to an HTML button and dropdown menu

I'm working on two main functions - getChart() and fetchData(). The goal is to retrieve chart data and x/y axes information from a database. Within the getChart function, I'd like to incorporate a dropdown menu for displaying different types of c ...

javascripthtmljquerycsschart.js

Angular Appreciation Meter

Looking to create a rating system using Angular. The square should turn green if there are more likes than dislikes, and red vice versa (check out the stackblitz link for reference). Check it out here: View demo I've tried debugging my code with con ...

htmlangulartypescript

Can you explain the functionality of that snippet of JavaScript code?

Can you figure out the value of r? How does it relate to Boolean operators and objects? var data = {x:123, y:456}; var r = data && data.x || 0; Update: Upon running the code snippet, I noticed that r consistently equals x. However, the reason behind thi ...

javascriptoop

What is the best way to utilize $.ajax for downloading JSON data from an HTML

I am currently facing an issue with a script that utilizes AJAX to retrieve JSON data. $.ajax({ type: "GET", url: url, /*url = index.html or data.json, many page use 1 script*/ success ...

javascriptajaxjson

Seeking guidance on waiting for chrome.storage.sync.get after adding a listener in Chrome

My extension has been successfully modifying some URLs. However, I now need to determine whether the modification feature is enabled in the settings. chrome.webRequest.onBeforeRequest.addListener ( modifyUrl, {urls: ['http://somewebsite/*&apo ...

javascriptgoogle-chromegoogle-chrome-extension

Implementing a higher-order component to attach individual event listeners to each component

One of the challenges I am facing in my app is handling user inputs from the keyboard using components. To address this, I have developed the following function: export default function withKeydownEventHandler (handler) { id = id + 1 return lifecycle({ ...

javascriptreactjskeydownhigher-order-componentsrecompose