Populate object values dynamically through function invocations

Question

Populate object values dynamically through function invocations

Currently, I am involved in a project with a VueJS application that incorporates the following helper class and method:

class BiometricMap {
  static get(bioType) {
    if (!bioType) {
      return BiometricMap.default();
    }

    const bioTypes = {
      40: () => this.getFace(),
      41: () => this.getFace(),
      42: () => this.getFace(),
      43: () => this.getFace(),
      60: () => this.getVoice(),
      61: () => this.getVoice(),
      140: () => this.getPin(),
      141: () => this.getPin(),
      150: () => this.getPalm(),
      152: () => this.getPalm(),
    };

    return (bioTypes[bioType])();
  }

  static getFace() {
    return {
      friendly: 'Face',
      type: 'face',
      icon: 'face',
    };
  }

  static getPalm() {
    return {
      friendly: 'Palm',
      type: 'palm',
      icon: 'pan_tool',
    };
  }

  static getPin() {
    return {
      friendly: 'PIN',
      type: 'pin',
      icon: 'radio_button_checked',
    };
  }

  static getVoice() {
    return {
      friendly: 'Voice',
      type: 'voice',
      icon: 'keyboard_voice',
    };
  }

  static default() {
    return {
      friendly: '',
      type: '',
      icon: '',
    };
  }
}

export default BiometricMap;

My goal is to make it dynamic since the list of bioTypes values can vary. Therefore, I made modifications to the get() method as follows:

import BiometricService from '../services/BiometricService';
...

  static async get(bioType) {
    if (!bioType) {
      return BiometricMap.default();
    }

    const bioTypes = {};
    const baseBioTypes = await BiometricService.fetchAll();

    baseBioTypes.data.forEach((type) => {
      // Another instance where we need to change 'passphrase' to 'voice'.
      const captureType = type.captureType === 'passphrase' ? 'voice' : type.captureType;
      const methodName = `get${captureType.charAt(0).toUpperCase() + captureType.slice(1)}()`;
      bioTypes[type.bioType] = () => this[methodName];
    });

    return (bioTypes[bioType])();
  }

Despite successfully generating the value for methodName and adding it to the bioTypes object, the problem arises when reaching

return (bioTypes[bioType])();

as it does not trigger the corresponding method (e.g., getFace(), getVoice(), etc.). What adjustments should I make in how I populate the bioTypes object to ensure the correct method is called?

javascript object vue.js vuejs2

Answer 1

Answer №1

Upon review, it appears that there are a couple of potential errors in this code snippet:

const methodName = `get${captureType.charAt(0).toUpperCase() + captureType.slice(1)}()`;

If captureType is voice, then methodName will be getVoice(). However, it seems unnecessary to have the () at the end.

Additionally, take a look at this section:

bioTypes[type.bioType] = () => this[methodName];

A closer inspection reveals that the function is returning the method instead of invoking it.

To correct these mistakes, you should modify the code to:

bioTypes[type.bioType] = () => this[methodName]();

Here's an updated version with the fixes implemented:

BiometricService = {
  async fetchAll () {
    return {
      data: [
        { bioType: 40, captureType: 'face' },
        { bioType: 41, captureType: 'face' },
        { bioType: 42, captureType: 'face' },
        { bioType: 43, captureType: 'face' },
        { bioType: 60, captureType: 'passphrase' },
        { bioType: 61, captureType: 'passphrase' },
        { bioType: 140, captureType: 'pin' },
        { bioType: 141, captureType: 'pin' },
        { bioType: 150, captureType: 'palm' },
        { bioType: 152, captureType: 'palm' }
      ]
    };
  }
};

class BiometricMap {
  static async get(bioType) {
    if (!bioType) {
      return BiometricMap.default();
    }

    const bioTypes = {};
    const baseBioTypes = await BiometricService.fetchAll();

    baseBioTypes.data.forEach((type) => {
      const captureType = type.captureType === 'passphrase' ? 'voice' : type.captureType;
      const methodName = `get${captureType.charAt(0).toUpperCase()}${captureType.slice(1)}`;
      bioTypes[type.bioType] = () => this[methodName]();
    });

    return (bioTypes[bioType])();
  }

  // Other methods omitted for brevity...

}

(async () => {
  console.log('40 :', await BiometricMap.get(40));
  console.log('60 :', await BiometricMap.get(60));
  console.log('140 :', await BiometricMap.get(140));
  console.log('150 :', await BiometricMap.get(150));
})()

It may be worth noting that the current implementation seems inefficient as it loads all bioTypes but only uses one per call. Consider optimizing the code by simplifying the logic as shown below:

static async get(bioType) {
  if (!bioType) {
    return BiometricMap.default();
  }

  const baseBioTypes = await BiometricService.fetchAll();

  for (const type of baseBioTypes.data) {
    if (type.bioType === bioType) {
      const captureType = type.captureType === 'passphrase' ? 'voice' : type.captureType
      const methodName = `get${captureType.charAt(0).toUpperCase()}${captureType.slice(1)}`
      return this[methodName]()
    }
  }

  // TODO: Handle fall-through
}

In conclusion, consider revising the approach to retain the object bioTypes if it needs to be reused multiple times, and think about whether creating wrapper functions is necessary for your use case.

Answer 2

Upon review, it appears that there are a couple of potential errors in this code snippet:

const methodName = `get${captureType.charAt(0).toUpperCase() + captureType.slice(1)}()`;

If captureType is voice, then methodName will be getVoice(). However, it seems unnecessary to have the () at the end.

Additionally, take a look at this section:

bioTypes[type.bioType] = () => this[methodName];

A closer inspection reveals that the function is returning the method instead of invoking it.

To correct these mistakes, you should modify the code to:

bioTypes[type.bioType] = () => this[methodName]();

Here's an updated version with the fixes implemented:

BiometricService = {
  async fetchAll () {
    return {
      data: [
        { bioType: 40, captureType: 'face' },
        { bioType: 41, captureType: 'face' },
        { bioType: 42, captureType: 'face' },
        { bioType: 43, captureType: 'face' },
        { bioType: 60, captureType: 'passphrase' },
        { bioType: 61, captureType: 'passphrase' },
        { bioType: 140, captureType: 'pin' },
        { bioType: 141, captureType: 'pin' },
        { bioType: 150, captureType: 'palm' },
        { bioType: 152, captureType: 'palm' }
      ]
    };
  }
};

class BiometricMap {
  static async get(bioType) {
    if (!bioType) {
      return BiometricMap.default();
    }

    const bioTypes = {};
    const baseBioTypes = await BiometricService.fetchAll();

    baseBioTypes.data.forEach((type) => {
      const captureType = type.captureType === 'passphrase' ? 'voice' : type.captureType;
      const methodName = `get${captureType.charAt(0).toUpperCase()}${captureType.slice(1)}`;
      bioTypes[type.bioType] = () => this[methodName]();
    });

    return (bioTypes[bioType])();
  }

  // Other methods omitted for brevity...

}

(async () => {
  console.log('40 :', await BiometricMap.get(40));
  console.log('60 :', await BiometricMap.get(60));
  console.log('140 :', await BiometricMap.get(140));
  console.log('150 :', await BiometricMap.get(150));
})()

It may be worth noting that the current implementation seems inefficient as it loads all bioTypes but only uses one per call. Consider optimizing the code by simplifying the logic as shown below:

static async get(bioType) {
  if (!bioType) {
    return BiometricMap.default();
  }

  const baseBioTypes = await BiometricService.fetchAll();

  for (const type of baseBioTypes.data) {
    if (type.bioType === bioType) {
      const captureType = type.captureType === 'passphrase' ? 'voice' : type.captureType
      const methodName = `get${captureType.charAt(0).toUpperCase()}${captureType.slice(1)}`
      return this[methodName]()
    }
  }

  // TODO: Handle fall-through
}

In conclusion, consider revising the approach to retain the object bioTypes if it needs to be reused multiple times, and think about whether creating wrapper functions is necessary for your use case.

Populate object values dynamically through function invocations

Answer №1

Similar questions

Certain public files in Express cannot be accessed locally

Animating splitting elements with VueJS

Javascript - Could anyone provide a detailed explanation of the functionality of this code snippet?

Capturing AJAX responses within a Chrome Extension

Issue with Jquery AJAX success function specifically in Firefox browser, while other functions in the script are functioning correctly

What could be causing the submission failure of the form post validation?

Can a function be passed as props in a scenario where both a Parent and Child component are functional components?

Executing a function on the window object in JavaScript

Condition-based React state counter starts updating

utilize vuejs to display an alternative route on a side panel

Issues arise with Highcharts Sankey chart failing to display all data when the font size for the series is increased

Generating a collection of items using a pre-existing array of items

Step-by-step guide on adding data to an arraylist using JavaScript

implement a jQuery loop to dynamically apply css styles

Challenges Encountered when Making Multiple API Requests

To begin, select and upload two files for processing. Once complete, you can download the newly generated

Switch up a font style using JavaScript to apply a Google font effect

Retrieving the checkbox's status from the database

Tips for creating an illustration in Vue.js

Designate material for a particular table header element