Iterate over each option in a select dropdown menu and modify them

Below is the test code snippet I am working with:

ID = {
   CreatedBy: { id: 'createdBy' },
   ModifiedBy: { id: 'modifiedBy' }
}

Profile = {
   All: { text: 'All', val: 0 },
   Sys: { text: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b1812181f0e06341812181f0e062b1812181f0e0645080406">[email protected]</a>', val: 1 },
   Test: { text: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70041503042f05031502301c1906155e131f1d">[email protected]</a>', val: 2 }
}

changeSelect(dataId: EnumElement[], params: UserEnum[]) {
   dataId.forEach((data) => {
      params.forEach((elem) => {
         var label = data.id+ ' - Check option changed to - ' + elem.text;
         it(label, () => {
               return element(by.xpath('//select[@id="' + data.id + '"]/option[@value = "' + elem.val + '"]')).click();
         });
    });
}

In my testing scenario, I invoke the changeSelect() function like so:

changeSelect([ID.CreatedBy, ID.ModifiedBy], [Profile.Sys, Profile.Test]);

The current output of my changeSelect() function looks like:

createdBy - Check option changed to - <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a6963696e7f77456963696e7f775a6963696e7f7734797577">[email protected]</a>
createdBy - Check option changed to - <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="097d6c7a7d567c7a6c7b4965607f6c276a6664">[email protected]</a>
modifiedBy - Check option changed to - <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="becdc7cdcadbd3e1cdc7cdcadbd3fecdc7cdcadbd390ddd1d3">[email protected]</a>
modifiedBy - Check option changed to - <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d09180e0922080e180f3d11140b18531e1210">[email protected]</a>

However, I aim for a different output. How can I adjust my loop to achieve this desired result?

createdBy - Check option changed to - <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="582b212b2c3d35072b212b2c3d35182b212b2c3d35763b3735">[email protected]</a>
modifiedBy - Check option changed to - <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88fcedfbfcd7fdfbedfac8e4e1feeda6ebe7e5">[email protected]</a>
javascriptangularjsprotractor

Answer №1

Is there a better alternative to using a simple for loop?

updateSelectList(items, options) {
    for(let index = 0; index < items.length; index++){
        let item = items[index];
        let option = options[index];
        let description = item.id + ' - Option changed to - ' + option.text;
        it(description, () => {
            return element(by.xpath('//select[@id="' + item.id + '"]/option[@value = "' + option.val + '"]')).click();
        }
    }
}

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

Using MaterialUI to create a GridListTile with two IconButtons

I'm working with a GridListTile and trying to add a second button, but I'm having trouble getting both buttons to display. Even though I've attempted to include two ActionIcons, only one of them is showing up. Here's the code snippet: ...

javascripthtmlcssreactjsmaterial-ui

Displaying svg files conditionally in a react native application

I have developed an app specifically for trading dogs. Each dog breed in my app is associated with its own unique svg file, which are all stored in the assets folder (approximately 150 svg files in total). When retrieving post data from the backend, I re ...

javascriptreactjstypescriptreact-nativesvg

Comparing two Objects in JavaScript results in automatic updates for the second Object when changes are made to the first

Can someone please assist me with a hash map issue I'm encountering in my for loop? When resetting the second object, it unintentionally alters the Map values of the previous Key in the Hash Map. Any guidance on how to prevent this behavior would be g ...

javascript

Is it possible to transmit an array using $.ajax and specify the dataType as json?

I am currently attempting to send a JavaScript array to my .php file handler and store it in my database. Although the request is successful, it seems like my array isn't being posted/saved correctly. When I check the POST request source, it shows up ...

javascriptjqueryajaxarraysjson

ReactPlayer allows for the simultaneous playback of two files

I am trying to simultaneously play two files in reactjs using ReactPlayer. The first file is a video music clip that includes human voice audio, while the second file is music only without the human voice. My issue is that when I run the code provided, ei ...

javascriptreactjsreact-player

The mouse movement event will not be triggered for every frame when a keyboard event occurs

When the mouse is moving in a browser, ideally the mousemove event should fire every frame. However, if a key is pressed or released (or repeated), the mousemove event stops firing for a frame or two. To test this behavior, you can use the code snippet bel ...

javascriptdom-eventsmousemove

Ways to retrieve the identifiers of every child node UL element within a UL container

I am struggling with a basic question related to HTML structure. Here is the code snippet I am working with: <ul> <li> <ul class=t2 id=15> <li class='item'>a<span class='val'>b</ ...

javascript

I seem to be stuck in an endless loop within React and can't find a way to break free

Currently, I am utilizing the useState() function along with an array errors[] as part of the state and a function setError() to pass the useState() function to child elements for calling purposes: const [errors, setErrors] = useState([]); //-------------- ...

javascriptreactjs

Updating data scope in AngularJS using $http request not functioning properly

I am facing an issue where the $scope.user_free_status is not updating when I set a user free, but works perfectly fine when I unset the parameter. It's strange that I need to reload the page in one case and not the other. The data fetched is stored i ...

javascriptangularjsscopeionic-framework

Dynamically alter routing in Express by retrieving route paths from a JSON document

My goal is to dynamically update my route in Express using a JSON file that stores the specific link. The JSON data resides in articles.js and appears as follows: title: 'title1', link: 'title2', creator: 'user1', crea ...

javascriptnode.jsexpress

I'm having trouble with populating data in Mongoose. Can anyone provide guidance on

I am currently working on a simple CRUD example for a larger open-source project. I'm trying to populate user data, but despite consulting documentation and forums, I haven't been able to resolve the issue that's causing trouble. The error ...

javascriptnode.jsmongodbmongoose

Using JQUERY to toggle classes conditionally

$('.showall').css("cursor","pointer").click(function() { $('.value-container').toggle(); $('.dim-header').toggleClass($('.dim-header').toggleClass() == 'dim-header' ? 'dim-header active' : & ...

javascriptjquery

The Facebook JS SDK is causing an XSS error and returning a "user_denied" response, even though the Auth Popup for FB.Login is not being

I currently have a Facebook canvas app located at Previously, I was using an anchor link to direct users to the OAUTH login flow. After implementing the Facebook JavaScript SDK, I followed this logic: 1) Initialization of the FB API FB.init({ a ...

phpjavascriptjqueryfacebook

Adding up values of objects in a different array using Vue.js

Recently, I started using VueJs and encountered an object that contains arrays. One of the tasks I need to accomplish is to display the total sum of all amounts in one of the columns of the table. Here is my table structure: < ...

javascriptvue.js

Implementing one-time binding and optimizing 'track by' in ng-repeat loop

Our web application utilizes ngRepeat to showcase a list of items. Although the array and its objects remain constant, the user can modify the values of these objects. We assign a unique trackId to each item, which is regularly updated whenever the item&a ...

angularjsangularjs-ng-repeatangular1.6angularjs-track-byone-time-binding

How should event listeners be unbound and child elements removed in single page applications?

I've recently delved into the world of memory leaks in JavaScript while working on a large single-page application. After using Chrome's Profiles (Snapshot) function, I noticed an abundance of detached DOM elements indicating a possible memory le ...

javascriptjqueryajaxdom

There seems to be an issue with the function code error when calling it within the

When I attempt to run my code in this way, I encounter a compile time error stating that the expression statement is not an assignment or call... (within the else statement). What am I missing here to get it to work? I've made numerous attempts to ad ...

javascriptjqueryajaxasp.net-ajax

Assign a unique ID to each Angular Material checkbox

Presently, I am facing an issue: I am required to generate md-checkboxes from a Database. The implementation is successful using ng-repeat. However, I am encountering difficulties in fetching the data from these checkboxes. Each entry in the Database has ...

javascriptangularjsnode.jscheckboxpug

Innovative Inter-Browser Link with a Distinct Shape

I am currently developing a web application that enables users to input content and then send it out to their phones. Everything is working smoothly, but I am facing an issue with the logo design. The logo in question is displayed as follows: On the left ...

javascriptjqueryhtmlcssimage

Transient Flash of a jQuery Dropdown Menu

I'm currently developing a jQuery/CSS dropdown menu for a website, and everything is functioning well except for one issue. When navigating between sub-menu items, the text color of the selected main menu item briefly changes because of the CSS border ...

javascriptjqueryhtmlcss