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

How to trigger a file download instead of opening it in a new tab when clicking on a txt or png file in AngularJS

What could be causing a compile error in my React and TypeScript application?

Guide to displaying the value of a field in an object upon clicking the inline edit button using TypeScript

How to Create Smooth Transitions for Text Arrays using jQuery's Fade In and Fade Out Features

Angular is not programmed to automatically reflect updates made to my string array

Creating an HTML element within a three.js globe

Exploring the differences in performance between React hooks and React classes

React Leaflet causing a frequent map refresh due to context value updates

Should Redux Reducer deep compare values or should it be done in the Component's ShouldComponentUpdate function?

Best resolutions and formats for Nativescript-Vue application icons

The new mui v5 Dialog is having trouble accepting custom styled widths

Discovering uncategorized elements using javascript

Is it necessary to delay until the entire page finishes loading in Selenium 3?

The error occurs when Facebook and Twitter iframes are attempting to access and set 'document.domain'

Issue with pushing inner list<object> in Knockout version 3.2.0

What is causing the 'Invalid Hook Call' error to appear in React?

Unable to retrieve data from database using Angular 4

Can Vuejs delay the calculation of a computed property until the component is "ready"?

Leverage the power of forkJoin alongside activatedRoute

Concealing a Div element without the use of Jquery or JavaScript