Working with Angular to add various items to an array based on multiple conditions

Question

Working with Angular to add various items to an array based on multiple conditions

Currently, I am a beginner in TypeScript and currently involved in an Angular project.

As part of my work, I need to make an API call and perform various operations on the received data:

public data_Config: IConfig[] = [];

this.getService.Data(input).subscribe(
    data => {
        this.data_Config = data;
        this.data_Config.forEach(itm => { 
            if(itm.aFl == 'Y'){
                itm.Levels.push('A')
            }
            if(itm.bFl == 'Y'){
                itm.Levels.push('B')
            }
            if(itm.cFl == 'Y'){
                itm.Levels.push('C')
            }
        });
        this.dataSource_prgmConfiguration = new MatTableDataSource(this.data_prgmConfiguration);
        this.dataSource_prgmConfiguration.paginator = this.paginatorPrgmConfiguration;
        this.dataSource_prgmConfiguration.sort = this.sortPrgmConfiguration;
});

IConfig represents a type with numerous properties including 10-12 flag properties such as aFl, bFl, and cFl. My current implementation involves checking each flag property individually using if conditions. However, given the high number of flags, I am exploring better alternatives. Is there a more efficient way to handle this scenario?

Integration of IConfig

export interface IConfig {
    TypeNm: string;
    aFl: string;
    bFl: string;
    cFl: string;
    dFl: string;
    eFl: string;
    fFl: string;
    gFl: string;
    hFl: string;
    PlaceHolder: string;
    Association: string;
    ActiveFl: string;
    Actions: string;
    AssociatedProgramsStr?: string;
    Levels?: string[];
}

javascript angular typescript

Answer 1

Answer №1

Here's a way to achieve the desired outcome:

Object.keys(this.dataConfig).filter(key => key.indexOf('Fl') != -1).forEach(flag => {
    if(this.dataConfig[flag] == 'Y')
        itm.Levels.push(this.dataConfig[glag].charAt(0).toUpperCase());
}

This code snippet assumes that all your flags are labeled with the same format of xFl where x represents a letter, and the flag pertains to the uppercase version of that specific letter which should be added to the Levels array. Simply put, you extract the keys corresponding to flags from your object, iterate over them, and verify the condition mentioned above.

Answer 2

Here's a way to achieve the desired outcome:

Object.keys(this.dataConfig).filter(key => key.indexOf('Fl') != -1).forEach(flag => {
    if(this.dataConfig[flag] == 'Y')
        itm.Levels.push(this.dataConfig[glag].charAt(0).toUpperCase());
}

This code snippet assumes that all your flags are labeled with the same format of xFl where x represents a letter, and the flag pertains to the uppercase version of that specific letter which should be added to the Levels array. Simply put, you extract the keys corresponding to flags from your object, iterate over them, and verify the condition mentioned above.

Answer 3

Answer №2

There are various approaches to consider depending on the specific requirements,

If we assume that the IConfig interface only consists of boolean properties like aF1, bF1, cF1 ..., then a possible solution could look like this:

Option : 1

this.data_Config.forEach(item => { 

    Object.keys(item).forEach(key=>{
        if(item[key] === 'Y'){
            item.Levels.push('whatever'); // The exact representation of 'A','B' is unclear
        }
    })
    
});

Option: 2

In case the IConfig interface contains other non-boolean properties such as height, width, you can follow this approach:

const boolProperties = ['aF1', 'bF1', 'cF1']; // define boolean properties in an array

this.data_Config.forEach(item => { 

        Object.keys(item).forEach(key => {
            if(boolProperties.includes(key) && item[key] === 'Y'){
                item.Levels.push('whatever'); // The true meaning of 'A','B' is not specified
            }
        })
        
});

Answer 4

There are various approaches to consider depending on the specific requirements,

If we assume that the IConfig interface only consists of boolean properties like aF1, bF1, cF1 ..., then a possible solution could look like this:

Option : 1

this.data_Config.forEach(item => { 

    Object.keys(item).forEach(key=>{
        if(item[key] === 'Y'){
            item.Levels.push('whatever'); // The exact representation of 'A','B' is unclear
        }
    })
    
});

Option: 2

In case the IConfig interface contains other non-boolean properties such as height, width, you can follow this approach:

const boolProperties = ['aF1', 'bF1', 'cF1']; // define boolean properties in an array

this.data_Config.forEach(item => { 

        Object.keys(item).forEach(key => {
            if(boolProperties.includes(key) && item[key] === 'Y'){
                item.Levels.push('whatever'); // The true meaning of 'A','B' is not specified
            }
        })
        
});

Answer 5

Answer №3

If you're working with TypeScript, you have the ability to define an ENUM in the following manner.

enum myEnum {
  val1 = 'Value1',
  val2 = 'Value2'
}

You can then iterate through a set of data and extract the values that match your criteria.

let matchingValues: any[] = [];
myData.forEach(item => {
 if (item === 'Y'){
    matchingValues.push(myEnum[item]); 
 }
});

Answer 6

If you're working with TypeScript, you have the ability to define an ENUM in the following manner.

enum myEnum {
  val1 = 'Value1',
  val2 = 'Value2'
}

You can then iterate through a set of data and extract the values that match your criteria.

let matchingValues: any[] = [];
myData.forEach(item => {
 if (item === 'Y'){
    matchingValues.push(myEnum[item]); 
 }
});

Working with Angular to add various items to an array based on multiple conditions

Integration of IConfig

Answer №1

Answer №2

Answer №3

Similar questions

Incorporating the Revolution Slider jQuery plugin within a Vue.js environment

What is the reason behind a TypeScript compiler error being triggered by an 'if-else' statement, while a ternary operator construct that appears identical does not raise any errors?

Implementing Java script for onkeypress event in a search bar that does not require a button

Exploring AngularJS: Effortlessly Retrieving Object Values

Tips for sending props to Material UI components

Tips on sending references from child to parent components in ReactJS

What are the methods for showcasing data within a string?

Error encountered during Ionic iOS build caused by google-plus plugin

Assigning value to a member variable in a TypeScript Angular class

Utilizing unique layouts for specific views in sails.js and angular.js

Distributing JWT to the recipient using Express

Utilizing the power of Ajax for enhancing table sorting and filtering functionality

Recalling the layout following the user's computer restart

I need to know how to create a patch request in Vue.js and simultaneously modify the marks input for specific individuals by using v-model

I'm unable to modify the text within my child component - what's the reason behind this limitation?

What is the best method to add data to a child array located within a nested array?

Exploring the synergies between Angular Dragula and utilizing the $index property

Modifying the selected color of DropDownMenu List items

What is the process of uploading a file from a Vue.js app to the local public disk in Laravel?

Setting the base URL in Next.js according to an environment variable: a step-by-step guide