Are there more efficient methods for locating a particular item within an array based on its name?

While I know that using a loop can achieve this functionality, I am curious if there is a built-in function that can provide the same outcome as my code below:

const openExerciseListModal = (index:number) =>{
let selectedValue = selectedItems[index];
items.forEach((element,index) => {
  if(element.value===selectedValue){
    alert(index)
  }
});
savedExercises = [...selectedExercise]
setExerciseListModalVisible(() => !isExerciseListModalVisible)

The structure of my array looks like this:

[{ label: "Monday", value: "Monday" },{ label: "Tuesday", value: "Tuesday" }]

My objective is to click a button on the screen and obtain the index of the corresponding item in my array. For example, pressing on Monday should return 0.

Answer №1

If I had to choose, I would probably opt for something along the lines of:

const index = items.map(({ value }) => value).indexOf(selectedValue)

Iterate through the items to generate an array containing the specific item you are looking for, and then determine its index.


Keep in mind: when working with very large arrays, this method could be slow as it involves looping over the results twice. However, for simpler cases like days of the week, it should work just fine.

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 approach for managing optional object input parameters while also verifying the presence and accuracy of that specific property?

What is the best approach to handling a situation where a method has optional object member properties for the options object, but you still want to ensure the presence of that property with a default value in the resulting instance? Is creating a separate ...

Cannot locate AngularJS + Typescript controller

I'm encountering an error while attempting to integrate TypeScript with AngularJS. The issue I'm facing is: Error: [$controller:ctrlreg] The controller named 'MyController' has not been registered Does anyone have any insights on what ...

Filtering through an array object with PrimeNG

Is it feasible to utilize an array of objects for filtering data in a table? I'm currently using Angular 6 and PrimeNG 7. This is how my p-table appears: <p-table #table class="ui-table ui-table-responsive" [value]="arrays" [columns]="cols" > ...

Objects in the array are failing to sort in the expected sequence

I am facing an issue with sorting an array of objects by a date property using the lodash function orderBy. I have tried to sort it in both ascending and descending order. var searchObj = [{id: 1, postDate: '2/24/2016 5:08 PM'}, ...

Testing a function that utilizes Nitro's useStorage functionality involves creating mock data to simulate the storage behavior

I have developed a custom function for caching management, specifically for storing responses from API calls. export const cache = async (key: string, callback: Function) => { const cacheKey = `cache:${key}`; const data = await useStorage().get ...

Utilizing Express JS to make 2 separate GET requests

I am facing a strange issue with my Express API created using Typescript. The problem revolves around one specific endpoint called Offers. While performing operations like findByStatus and CRUD operations on this endpoint, I encountered unexpected behavior ...

Issues with the ES version affecting back4app cloud code functions

Utilizing back4app as my backend service for deploying my React Native and JS app, I am currently experimenting with the 'Cloud Code Functions' feature. Being new to back4app, I encountered an issue when following their guide. I received this er ...

Updating the data type of the Request object following the execution of the checkAuth middleware in Types

I'm relatively new to TypeScript and recently encountered an issue with extending the Request type. Although I managed to find a workaround, it doesn't sit well with me and I believe there may be a more optimal solution out there. Let's del ...

Exploring the process of introducing a new property to an existing type using d.ts in Typescript

Within my src/router.ts file, I have the following code: export function resetRouter() { router.matcher = createRouter().matcher // Property 'matcher' does not exist on type 'VueRouter'. Did you mean 'match'? } In an ...

How to style material-ui input with outlined variant using css

Currently, I am attempting to replicate the material-ui outlined input. The background color and input styles are different, so simply setting the label position to absolute and pushing it up is not working for me. Any suggestions on how to achieve this? ...

I am continuously receiving the message "Alert: It is important for every child in a list to possess a distinct "key" prop." while working with the <option> list

Having trouble generating unique keys for my elements. I've tried different values and even Math.random() but still can't seem to get it right. I know the key should also be added to the outer element, but in this case, I'm not sure which on ...

There seems to be a console error in Angular 5 when using IE 11

I've developed an Angular 4 application using MVC and Visual Studio 2015. Everything runs smoothly when I access the application on Chrome, but I encounter the following exception on IE 11: XHR error: (404 Not Found) loading http://localhost/src/ma ...

Developing a function that takes a parameter which can be used with or without an additional argument when invoked

In my React application, I have a method that accepts a parameter for displaying a modal. const displayModal = (p:Result) => { setConfirm(true); if(p) { //check variable for truthy setSelectedRow(p); } ...

Resolve cyclic dependency caused by utilizing the useFactory parameter

I am working with an injectable service that utilizes the useFactory attribute to determine whether it should be injected or if an implemented type should be used instead. import { Injectable } from '@angular/core'; import { Router } from ' ...

Displaying a component after retrieving a value from AsyncStorage in a React Native application

I have developed a React Component that saves user settings in the AsyncStorage and retrieves them upon loading. The functionality of storing and retrieving data is working fine, but I am facing an issue where the component renders before the values are ...

Converting a JSON array stored in a local file to a TypeScript array within an Angular 5 project

I'm currently working on developing a web app using Angular 5. My JSON file has the following structure: [ { "id": 0, "title": "Some title" }, { "id": 1, "title": "Some title" }, ... ] The JSON file is store ...

Typescript i18next does not meet the requirement of 'string | TemplateStringsArray NextJS'

While attempting to type an array of objects for translation with i18next, I encountered the following error message in the variable navItems when declaring i18next to iterate through the array Type 'NavItemProps[]' does not satisfy the constrain ...

What is the most effective method for creating Typescript type predicates that yield the most specific types when filtering arrays?

I believed I had discovered the perfect method for defining predicates: declare function isNumber<T>(x: T): x is Extract<T, number>; declare function isFunction<T>(x: T): x is Extract<T, Function>; ... and so forth This technique l ...

A step-by-step guide to activating multi-selection in the Primary SideBar of Visual Studio Code using your custom extension

Currently, I'm in the process of developing an extension for Visual Studio Code where I've added a new activityBar containing treeViews that showcase information pulled from a JSON file. My goal is to enable users to multi-select certain displaye ...

Alert: Fiber Caution in React-Native

Out of the blue, my react-native app is now showing me a warning message that says: WARNING Unable to locate Fiber with id "21847" Can anybody explain what this means and suggest how I can resolve it? ...