One creative method for iterating through an array of objects and making modifications

Question

One creative method for iterating through an array of objects and making modifications

Is there a more efficient way to achieve the same outcome?

Brief Description:

 
routes = [
{ name: 'vehicle', activated: true},
{ name: 'userassignment', activated: true},
{ name: 'relations', activated: true},
{ name: 'journeys', activated: true},
{ name: 'expenses', activated: true}

];

Your Task - Develop a function that can perform the following actions on the array above:

Set all members' property "activated" to false
Choose one specific member and set its "activated" property to true based on its 'name'
If the chosen member is 'journeys' or 'expenses', set them to true AND also set the 'relations' member to true

I have implemented the following code to accomplish this task, but my senior wants a smarter solution.

 
highlightActiveRoute(array: any[], chosen: string) {
  array.forEach(element => {
    element.activated = false;
    if (element.name === chosen) {
      element.activated = true;
      if (element.name === 'journeys' || element.name === 'expenses') {
        this.routes[2].activated = true;
      }
    } 
  });
}

I'm unsure if I can make it smarter, but perhaps you can provide some inspiration. Thank you!

javascript function typescript

Answer 1

Answer №1

This code snippet demonstrates how to highlight the active route using ArrayIterators in ECMAScript 2015. It ensures that no element in the array changes its position, providing a reliable solution:

toggleActiveRoute(array: any[], selected: string) {
array.forEach(item=>{item.isActive = false});
if(['journeys','expenses'].includes(selected))
{  
    array[array.findIndex(item=>{return item.name==='relations'})].isActive = true;
    array[array.findIndex(item=>{return item.name==='expenses'})].isActive = true;
    array[array.findIndex(item=>{return item.name==='journeys'})].isActive = true;
}
else
{
    array[array.findIndex(item=>{return item.name===selected})].isActive = true;
}

return array;
}

Answer 2

This code snippet demonstrates how to highlight the active route using ArrayIterators in ECMAScript 2015. It ensures that no element in the array changes its position, providing a reliable solution:

toggleActiveRoute(array: any[], selected: string) {
array.forEach(item=>{item.isActive = false});
if(['journeys','expenses'].includes(selected))
{  
    array[array.findIndex(item=>{return item.name==='relations'})].isActive = true;
    array[array.findIndex(item=>{return item.name==='expenses'})].isActive = true;
    array[array.findIndex(item=>{return item.name==='journeys'})].isActive = true;
}
else
{
    array[array.findIndex(item=>{return item.name===selected})].isActive = true;
}

return array;
}

Answer 3

Answer №2

I took the liberty of making some minor enhancements to your code. Firstly, I streamlined the process by only updating the variable element.activated once instead of twice as before. Additionally, I simplified the structure of the code to enhance readability. I hope these improvements prove to be beneficial for you. Best of luck with your project!

highlightActiveRoute(array: any[], chosen: string) {
    array.forEach(element => {
        element.activated = element.name === chosen; 
        if (element.activated 
            && (element.name === 'journeys' || element.name === 'expenses')) {
                this.routes[2].activated = true;
        } 
    });
}

Answer 4

I took the liberty of making some minor enhancements to your code. Firstly, I streamlined the process by only updating the variable element.activated once instead of twice as before. Additionally, I simplified the structure of the code to enhance readability. I hope these improvements prove to be beneficial for you. Best of luck with your project!

highlightActiveRoute(array: any[], chosen: string) {
    array.forEach(element => {
        element.activated = element.name === chosen; 
        if (element.activated 
            && (element.name === 'journeys' || element.name === 'expenses')) {
                this.routes[2].activated = true;
        } 
    });
}

One creative method for iterating through an array of objects and making modifications

Answer №1

Answer №2

Similar questions

The elements within the NativeScript components are failing to show the data received from the Django API

Centralizing images in a Facebook gallery/lightbox during the loading process

Allowing SVGs to be clickable without disrupting the functionality of YouTube videos

Issues arise when using the select element

Error message: When attempting to redirect to another route, there is a type error with 'this' as it is implicitly assigned the type 'any'

Type-constrained generic key access for enhanced security

Encounter the error message "Socket closure detected" upon running JSReport in the background on a RHEL system

Transformed the Next.js Pages Router into an Application Router

Encountering an Issue when Registering New Users in Database using Next.js, Prisma, and Heroku

Angular 2 Issue: Error Message "Cannot bind to 'ngModel'" arises after FormsModule is added to app.module

Assigning websockets to a global variable may cause them to malfunction

Obtain information from Firebase and display it in a list

The input 'Element' does not match the expected parameter 'ReactElement<any>' in this context

Store the results in the database following the execution of a protractor test

What could be the reason for the malfunction of my callback function?

What is the best way to handle errors generated by my jsdom.jqueryify callback function?

How can one properly utilize material-ui CSS?

Is there a way to send the image object to the onclick function as it is being assigned?

Tips and tricks for manipulating base64 images in Node.js

Mismatch between generic types