Steps for selectively targeting and updating a group of properties in a TypeScript class

Question

Steps for selectively targeting and updating a group of properties in a TypeScript class

Is there a way to consolidate this code into one function that can handle all the tasks below?

I'm adding more text here to meet the requirements and hoping for a solution. Thank you! TypeScript is an amazing language that differs slightly from JavaScript. I tried my own method to resolve the issue below, but kept getting 'undefined'. It's challenging to group, target, and change the values.


class foods {
    private apple: boolean;
    private banana: boolean;
    private guava: boolean;
    private passionfruit: boolean;
    private melon: boolean;
    private oranges: boolean;
    private porkchop: boolean;
    private steak: boolean;
    private chicken: boolean;

    toggleFruit(fruit: string) {
        for (let key in this) {
            if (this.hasOwnProperty(key)) {
                this[key] = false;
            }
        }
        this[fruit] = true;
    }

}

angular typescript

Answer 1

Answer №1

If you're looking to streamline your code, consolidating everything into a single function is a great approach. While there may be more innovative solutions out there, this method effectively centralizes all the logic within a toggle function.

apple: boolean;
banana: boolean;
guava: boolean;
passionfruit: boolean;
melon: boolean;
oranges: boolean;
porkchop: boolean;
steak: boolean;
chicken: boolean;

constructor(
) {
    this.apple = false;
    this.banana = false;
    this.guava = false;
    this.passionfruit = false;
    this.melon = false;
    this.oranges = false;
}

toggleFruit(fruitName: string) {
    (fruitName === 'apple' ? this.apple = true : this.apple = false);
    (fruitName === 'banana' ? this.banana = true : this.banana = false);
    (fruitName === 'guava' ? this.guava = true : this.guava = false);
    (fruitName === 'passionfruit' ? this.passionfruit = true : this.passionfruit = false);
    (fruitName === 'melon' ? this.melon = true : this.melon = false);
    (fruitName === 'oranges' ? this.oranges = true : this.oranges = false);
}

Answer 2

If you're looking to streamline your code, consolidating everything into a single function is a great approach. While there may be more innovative solutions out there, this method effectively centralizes all the logic within a toggle function.

apple: boolean;
banana: boolean;
guava: boolean;
passionfruit: boolean;
melon: boolean;
oranges: boolean;
porkchop: boolean;
steak: boolean;
chicken: boolean;

constructor(
) {
    this.apple = false;
    this.banana = false;
    this.guava = false;
    this.passionfruit = false;
    this.melon = false;
    this.oranges = false;
}

toggleFruit(fruitName: string) {
    (fruitName === 'apple' ? this.apple = true : this.apple = false);
    (fruitName === 'banana' ? this.banana = true : this.banana = false);
    (fruitName === 'guava' ? this.guava = true : this.guava = false);
    (fruitName === 'passionfruit' ? this.passionfruit = true : this.passionfruit = false);
    (fruitName === 'melon' ? this.melon = true : this.melon = false);
    (fruitName === 'oranges' ? this.oranges = true : this.oranges = false);
}

Answer 3

Answer №2

You have the option to create an Array of Objects containing two key-value pairs: name and status.

Here is an example:

   foodList = [
      { name: 'Apple', status: false },
      { name: 'Banana', status: false }
      ...
    ];

The name property represents the food item's name, while the status property indicates whether the food item is true or false.

Next, you can create a method that takes the food name as a parameter.

toogleFood(foodName: string) {
   this.foodList.map( food => {
      if (food.name === foodName) {
         food.status = true;
      }
   });
}

Answer 4

You have the option to create an Array of Objects containing two key-value pairs: name and status.

Here is an example:

   foodList = [
      { name: 'Apple', status: false },
      { name: 'Banana', status: false }
      ...
    ];

The name property represents the food item's name, while the status property indicates whether the food item is true or false.

Next, you can create a method that takes the food name as a parameter.

toogleFood(foodName: string) {
   this.foodList.map( food => {
      if (food.name === foodName) {
         food.status = true;
      }
   });
}

Answer 5

Answer №3

Give this a shot

class groceries {
    private selected: string[] = [];

    toggleCarrot() {
        this.toggleProduct('carrot');
    }

    toggleBroccoli() {
        this.toggleProduct('broccoli');
    }

    togglePineapple() {
        this.toggleProduct('pineapple');
    }

    toggleKiwi() {
        this.toggleProduct('kiwi');
    }

    toggleMango() {
        this.toggleProduct('mango');
    }

    togglePeach() {
        this.toggleProduct('peach');
    }

    private toggleProduct(name: string): void {
        if (this.selected.includes(name)) {
            this.selected = this.selected.filter((selectedName) => selectedName !== name);
        } else {
            this.selected.push(name);
        }
    }
}

Answer 6

Give this a shot

class groceries {
    private selected: string[] = [];

    toggleCarrot() {
        this.toggleProduct('carrot');
    }

    toggleBroccoli() {
        this.toggleProduct('broccoli');
    }

    togglePineapple() {
        this.toggleProduct('pineapple');
    }

    toggleKiwi() {
        this.toggleProduct('kiwi');
    }

    toggleMango() {
        this.toggleProduct('mango');
    }

    togglePeach() {
        this.toggleProduct('peach');
    }

    private toggleProduct(name: string): void {
        if (this.selected.includes(name)) {
            this.selected = this.selected.filter((selectedName) => selectedName !== name);
        } else {
            this.selected.push(name);
        }
    }
}

Steps for selectively targeting and updating a group of properties in a TypeScript class

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to incorporate an interface in TypeScript that is both callable and has properties?

Steps for developing a collaborative module

Changing the generic type's constraint type in TypeScript to have more flexibility

Tips for retrieving the Solana unix_timestamp on the front-end using JavaScript

Assign a value using the select component from Material UI

The property 'filter' is not recognized on the 'Object' type. An attempt to filter the response was made

What is the best way to initiate a dialog within the handleSubmit function?

Running into compilation issues when incorporating ipcRenderer into an Angular 15 and Electron 22 application

Creating a map in Typescript initialized with a JSON object

The promise briefly returns a placeholder object before resolving with the actual response

What is the best way to transfer an array of objects between two components in React?

Using Pydantic to define models with both fixed and additional fields based on a Dict[str, OtherModel], mirroring the TypeScript [key: string] approach

showcasing products from database with the help of Angular 12

Make sure to wait for a Promise to resolve before initiating another Promise within a for loop in Angular

Error message: The function ctorParameters.map is not defined

How can TypeScript be used to update the values and text of an HTML element?

Angular 4 scatter chart with multiple data points using Google charts

Guide to connecting a table to a detailed view in Angular

Implementing ngClass change on click within an Angular component using Jasmine: A comprehensive guide

Tips for sorting and categorizing information within Angular version 14