What is the best way to iterate through an array and dynamically output the values?

I am facing an issue with a function that retrieves values from an array, and I wish to dynamically return these values.

const AvailableUserRoles = [
  {
    label: 'Administrator',
    value: 1
  },  
  {
    label: 'Count',
    value: 2
  },
  {
    label: 'Test',
    value: 5
  }
]

The function I have takes a parameter, which is a numeric value.

function getValue(item){
    if(item == AvailableUserRoles[0].value){
      return 'Administrator'

    }else if(item == AvailableUserRoles[1].value){
      return 'Count'

    }else if(item == AvailableUserRoles[3].value){
      return 'Test'

    }
  }      
}

I am looking for a way to make this check using dynamic values for easier addition of new options in the future. It should eliminate the need to constantly reference AvailableUserRoles[].value.

Answer №1

Utilize Array.find method for dynamically locating the corresponding value.

const UserRolesList = [
    {
        label: 'Admin',
        value: 1
    },
    {
        label: 'Editor',
        value: 2
    },
    {
        label: 'Viewer',
        value: 5
    }
]
function retrieveRole(item) {
    const matchedItem = UserRolesList.find(node => node.value === item);
    return matchedItem ? matchedItem.label : "";
}
console.log(retrieveRole(1)); // Displays 'Administrator'
console.log(retrieveRole(2)); // Displays 'Count'
console.log(retrieveRole(5)); // Displays 'Test'
console.log(retrieveRole(6)); // Displays ''

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

React Navigation - CSS file identified as "text/html" after introducing a dynamic route parameter (/userId)

Our customized stylesheet "styles.css" seems to be incorrectly identified with the MIME type "text/html", even though it is specified as: rel="stylesheet" type="text/css" This issue only arises when navigating to routes with a variable parameter such as ...

Converting Database Information to JSON Format for Mobile Authentication Form

Currently, I am working on a Mobile App project using Phonegap that requires users to log in before retrieving JSON data. This PHP page is responsible for connecting to the mobile site and fetching the necessary information. <?php $con = mysqli_connec ...

Tips for configuring page-specific variables in Adobe DTM

Although I have integrated Adobe Analytics for tracking on my website, I am facing difficulty in properly defining the variables. This is how I attempted to define the variable: var z = new Object(); z.abc = true; z.def.ghi = true Despite following the ...

The ExpressJS EJS issue arises when trying to access a property that is undefined

I'm new to NodeJS and seeking assistance. I am working on a website where users can promote their virtual conferences for others to see. I have set up a form with the POST method, where the data gets pushed into an array and then displayed in an EJS f ...

Exploring the directories: bundles, lib, lib-esm, and iife

As some libraries/frameworks prepare the application for publishing, they create a specific folder structure within the 'dist' directory including folders such as 'bundles', 'lib', 'lib-esm', and 'iife'. T ...

Moving a window in Pyqt5 using QtWebChannel

My goal is to enable the mousePressEvent and mouseMoveEvent events in order to move my app window using QtWebChannel. To achieve this, I am utilizing self.setWindowFlags(QtCore.Qt.FramelessWindowHint) to eliminate the default window flag and create a cust ...

An unanticipated issue has occurred: TypeError - the product information being searched for is not defined

import { useContext, useEffect, useState } from "react" import Layout from "../components/Layout" import { ProductsContext } from "../components/ProductsContext" export default function CheckoutPage(){ const {selecte ...

The Page is Not Able to Scroll

Occasionally, my app stops allowing scrolling of the entire page length. Everything will be working fine for a while, but then out of nowhere, the page suddenly becomes un-scrollable and you can only interact with the section currently visible on the scree ...

Interactive button displaying modal for every row in b-table

I'm working with Laravel, Vue, and Bootstrap-Vue. Currently, I have developed a Vue component that showcases a table of elements (in this case, subnets). Each element in the table has an associated component called "modal_edit-subnet" which is intend ...

Keep retrying a request until a valid response is received

I am working with an API that requests data from a backend service. Sometimes, the data may not be available at the time of the initial request. In such cases, I need the system to retry up to 5 times until the data is present. I can confirm that the dat ...

Encountering issues with configuring an Express server with HTTPS

Having difficulty setting up my Express server on HTTPS and accessing my API. Below is the code I am using: // server.js const express = require('express'); const { readFileSync } = require('fs'); const https = require('https' ...

Develop and test a query by examining its structure, parsing it, and assessing its effectiveness

Building a query using different conditions selected from html controls in a textarea, allowing users to make modifications as needed. On the client side: a(1, 3) > 20 b(4, 5) < 90 c(3, 0) = 80 The query formed is: a(1, 3) > 20 and b(4, 5) < ...

Utilizing Material UI (mui) 5.0 within an iframe: Tips and tricks

Attempting to display MUI components within an iframe using react portal has resulted in a loss of styling. Despite being rendered within the iframe, MUI components seem to lose their visual appeal when displayed this way. Most resources discussing this is ...

Having trouble persisting data with indexedDB

Hi there, I've encountered an issue with indexedDB. Whenever I attempt to store an array of links, the process fails without any visible errors or exceptions. I have two code snippets. The first one works perfectly: export const IndexedDB = { initDB ...

Tips for refreshing an angularjs $scope using $.get jquery

Attempting to implement the code below using $scope: var scopes = "https://www.googleapis.com/auth/contacts.readonly"; setTimeout(authorize(), 20); function authorize() { gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, h ...

Tips for updating multiple bundled javascript files with webpack

I am working on a straightforward app that requires users to provide specific pieces of information in the following format. Kindly input your domain. User: www.google.com Please provide your vast URL. User: www.vast.xx.com Select a position: a) Bottom ...

Can you help me convert this Mongoose code to use promises?

Using Mongoose's built-in promise support, I aim to streamline the process of a user sending a friend request to another user. However, even with careful error handling and sequencing in place, I find myself grappling with a slightly condensed pyramid ...

What is the process of linking this JavaScript code to an outer stylesheet and integrating it with the HTML document?

After encrypting an email address using Hiveware Enkoder, the result can be found below. obfuscated code I typically include it directly inside the div as is. However, I would like to streamline my code by placing it in an external file. While I know ho ...

Transfer sound data blob to server and store it as a file

Currently, I have 3 buttons on my webpage - one to start recording audio, one to stop the recording, and one to play the recorded audio. Using MediaRecorder makes it easy to capture audio as a blob data. However, I am facing issues when trying to upload th ...

A TypeScript function that returns a boolean value is executed as a void function

It seems that in the given example, even if a function is defined to return void, a function returning a boolean still passes through the type check. Is this a bug or is there a legitimate reason for this behavior? Are there any workarounds available? type ...