What are the ways to utilize shorthand effectively?

My if blocks are getting too long. I'm looking for a way to use shorthand. Any suggestions?

     if (selected.value == "" || search.value == "") {
        data;
      } else if (selected.value == "Email") {
        data["email"] = search.value;
      } else if (selected.value == "Name") {
        data["name"] = search.value;
      } else if (selected.value == "Surname") {
        data["surname"] = search.value;
      }

Answer №1

if (search.value && ["Email", "Name", "Surname"].includes(selected.value)) {
    data[selected.value.toLowerCase()]  = search.value;
}

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

Converting an array of form data into JSON using Angular and Typescript

When submitting a form using ng-submit in my Angular application, I receive an array of fields that I need to post to a RESTful web service. However, I'm unsure how to map and convert this data into the desired final object template within my Angular ...

problem encountered while running the npm run watch command

I recently started a project using vue.js and encountered an issue while trying to execute the npm run watch command. The error message received is shown below. https://i.sstatic.net/YOwtQ.png Below is the code from my composer.json file: "scripts": { ...

I encountered an issue with the "props map error" while working on this

Hello everyone, I am currently in the process of learning React by creating a toggle button for switching between light and dark modes. However, I have encountered an issue when attempting to map through the state and display the data in card format (altho ...

Ways to dynamically conceal an HTML element when another element is devoid of content

How can I dynamically hide the heading above a div if that div is empty? The content of the div will change based on user input. I would like the heading1 to appear immediately after a button click event. I am inclined towards a CSS solution, although the ...

Is it possible for an object in three.js to be both rotated and moved simultaneously?

Hello, thank you for your time. I'm trying to simultaneously move and rotate an object, but it seems to be behaving erratically. I've read that rotation can change the axis in some way. Is this true? Below is the code where I attempted to rotate ...

What could be causing the errors when trying to populate fields while using Sequelize?

My current project involves working with Sequelize on an Apollo-Server backend. While most of the process has been smooth sailing, I've hit a roadblock when it comes to refactoring my code. Specifically, I am encountering difficulties populating certa ...

Troubleshooting React/Jest issues with updating values in Select elements on onChange event

I am currently testing the Select element's value after it has been changed with the following code: it("changes value after selecting another field", () => { doSetupWork(); let field = screen.getByLabelText("MySelectField") ...

Retrieve data from a JSON file URL using a GET request and save the response to be accessed globally when the Vue.js application is initialized

Consider this scenario - I have a Vue.js component where I need to display the name of a user based on their ID. The only information I have is the user's ID. However, I also have a JSON file URL that contains all the user objects with their names and ...

Scheduling with FullCalendar: Embracing the Unique Parallelogram Events

Is there a way to change the shape of the event from a square to a parallelogram? Here is an example in the image below: https://i.sstatic.net/hKtz7.png I attempted to modify the CSS with the code snippet below: .fc-event-container{ background-colo ...

Is JSON formatting essential for Highcharts? How to divide and preprocess data for creating charts?

Seeking assistance with extracting data from a JSON at the following link: I am attempting to integrate this data into highcharts for visualization. Although I have a functioning chart, I am struggling with properly formatting the JSON mentioned above du ...

Unlocking the Secrets: Javascript Tricks for Retrieving Object Values

I have an item that contains data which I need to display. {"text": "active user active user213123 idle user234234234 loggedout userafdadf" }, To extract the content, I used the following code: Response = message.s ...

Error: Unable to access properties of an undefined value (trying to read 'type') within Redux Toolkit

Looking for help with this error message. When trying to push the book object into the state array, I encounter an error. Folder structure https://i.stack.imgur.com/9RbEJ.png Snippet from BookSlice import { createSlice } from "@reduxjs/toolkit" const ...

Selecting a Child Component in Vue.js: A Guide to Specifying the Correct Component

Within my application, I have a variety of components that are either generic or specific to certain brands. For example, I have two brand-specific components named Product_brand_A.vue and Product_brand_B.vue, both of which I want to display in a list form ...

The handleSumbit feature seems to be malfunctioning in a React Native application that utilizes React-Hook-Form in combination with yup

Greetings, I am currently utilizing React-hook-form and yup for validation in my React Native project. However, I have run into an issue with the handleSubmit function not functioning properly in my ResetPasswordScreen component. Strangely enough, a simila ...

Calculate the sum of hours worked in a day using pure JavaScript, no external libraries required

Hello, I'm new to this website and please excuse me if my English is not perfect, I am trying my best to communicate :) I have been working on a page that calculates the total hours worked in a day and this is what I have achieved so far until 15/06 ...

Using Three.js to import and cast rays on a .obj model created in Blender

I have successfully imported a 3D terrain using Blender and the OBJLoader in Three.js. In addition, I have created a mesh (highlighted in yellow in the image below) that I want to follow the mouse cursor while it hovers over the terrain. I have attempted t ...

How to compare various values from two different Objects and then store them in an array-type variable

Below are two sets of data for objects: { "obj1": { "product": "Book", "category": "sci-fi", "title": "interstellar", }, "obj2": { & ...

Change the boxShadow and background properties of the material-ui Paper component

I am currently referencing their documentation found at this link in order to customize default Paper component properties. Below is the code snippet I have: import { styled } from '@mui/material/styles'; import { Modal, Button, TextField, Grid, ...

Steps to calculate the total number of rows in a datatable

I have implemented a datatable in my project, and I need to find out the total number of rows in the table when it is loaded. Here's the snippet of code I am currently using: $(document).ready( function() { $('#jobSearchResultTable').data ...

The intersectObjects function is failing to retrieve the object from the OBJMTLLoader

Within my scene, I've introduced a new object along with several other cubes. To detect collisions, I'm utilizing the following code snippet that fires a Ray: var ray = new THREE.Raycaster(camera.position, vec); var intersects = ray.intersectObj ...