Utilize loop iteration to execute a function with the same name - JavaScript

Question

Utilize loop iteration to execute a function with the same name - JavaScript

In my init function, I have a loop:

  fruits = {
    apple: { color: 'green' },
    banana: { color: 'yellow' },
    kiwi: { color: 'green' }
  }

  ngOnInit() {
    for ( let fruit in this.fruits ) {
      if ( this.fruits[fruit].color === 'green' ) {
        // I want to actually invoke the functions
        this[fruit]()
      }
    }
  }

I am attempting to call functions that meet a specific condition. The functions will be named after the "loop iterator," but I'm struggling to figure out how to dynamically make the call.

  apple() { ... }
  banana() { ... }
  kiwi() { ... }

Therefore, according to the loop's condition, apple() and kiwi() should be executed if they are green fruits.

Question: How can I correctly construct the function call within the ngOnInit function?

I have tested: this[fruit]() , this.fruit() , this['fruit'] . Which option is correct?

javascript angular typescript ecmascript-6

Answer 1

Answer №1

In my opinion, that is the correct way to achieve your desired outcome

const vegetables = {
  broccoli: { color: 'green' },
  carrot: { color: 'orange' },
  spinach: { color: 'green' }
}

ngOnInit() {
  for ( let veggie in this.garden ) {
    if ( vegetables[veggie].color === 'green' ) {
      // Utilizing the current iterator here
      this[veggie]();
    }
  }
}

Answer 2

In my opinion, that is the correct way to achieve your desired outcome

const vegetables = {
  broccoli: { color: 'green' },
  carrot: { color: 'orange' },
  spinach: { color: 'green' }
}

ngOnInit() {
  for ( let veggie in this.garden ) {
    if ( vegetables[veggie].color === 'green' ) {
      // Utilizing the current iterator here
      this[veggie]();
    }
  }
}

Answer 3

Answer №2

To make your code functional, you must execute this[key_in_obj]() in order to run the function.

const items = {
    chair: { material: 'wood' },
    table: { color: 'brown' },
    lamp: { power: 'electric' }
  }
for(let item in items) {
  console.log(item);
  if (items[item].material === "wood") {
    this[item]();
  }
}

Answer 4

To make your code functional, you must execute this[key_in_obj]() in order to run the function.

const items = {
    chair: { material: 'wood' },
    table: { color: 'brown' },
    lamp: { power: 'electric' }
  }
for(let item in items) {
  console.log(item);
  if (items[item].material === "wood") {
    this[item]();
  }
}

Answer 5

Answer №3

It seems like you're attempting to implement some logic based on a static condition using multiple functions named according to the parameter value in the iterator. The recommended approach is to create a single function and pass the fruit as a property. Then, you can handle the logic within the function based on the property value itself using a switch statement (or if else conditions).


const fruits = {
    apple: { color: 'green' },
    banana: { color: 'yellow' },
    kiwi: { color: 'green' }
}
handleGreenFruit(fruit: string) {
    switch (fruit) {
        case 'apple':
            console.log('do apple stuff')
            break;
        case 'kiwi':
            console.log('do kiwi stuff')
            break;
    }
}
ngOnInit() {
    for (let fruit in this.fruits) {
        if (this.fruits[fruit].color === 'green') {
            this.handleGreenFruit(fruit);
        }
    }
}

Answer 6

It seems like you're attempting to implement some logic based on a static condition using multiple functions named according to the parameter value in the iterator. The recommended approach is to create a single function and pass the fruit as a property. Then, you can handle the logic within the function based on the property value itself using a switch statement (or if else conditions).


const fruits = {
    apple: { color: 'green' },
    banana: { color: 'yellow' },
    kiwi: { color: 'green' }
}
handleGreenFruit(fruit: string) {
    switch (fruit) {
        case 'apple':
            console.log('do apple stuff')
            break;
        case 'kiwi':
            console.log('do kiwi stuff')
            break;
    }
}
ngOnInit() {
    for (let fruit in this.fruits) {
        if (this.fruits[fruit].color === 'green') {
            this.handleGreenFruit(fruit);
        }
    }
}

Utilize loop iteration to execute a function with the same name - JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

When I set the width of my script to 100% in CSS, it causes the width to become distorted

Transferring data using Ajax in a contact form PHP file

Insert a parameter or substitute the existing value if detected

Display JSON data using Vue.js

Node.JS: Combining Multiple Files into a Single Output File

Xpath: Choosing the parent node value in xpath when a child node is present

Is a shifting background image possible?

The interconnected nature of multiple asynchronous tasks can lead to a render loop when relying on each other, especially when

Experiencing a lack of information in express?

What is the most efficient method for storing and accessing a large matrix in JavaScript?

How can I remove the script from Response.Write?

Can you provide an example and explain the functions `getOptionSelected` and `getOptionLabel` in Material UI?

Creating a universal header for all webpages in Angular JS by dynamically adding elements using JavaScript DOM manipulation techniques

What is the process of displaying events from components within ng2 submodules?

Position control in the Google Maps V2 interface

Linking AngularJS directives with HTML elements following an AJAX call

Connecting an HTML box to a JavaScript function for the desired outcome: How to do it?

What is the best way to retrieve children generated by a custom HTML component using idiomatic React methods?

Can anyone provide a solution for fixing TypeScript/React error code TS7053?

Utilizing useEffect Hooks to Filter Local JSON Data in React Applications