What is the best way to encapsulate a child's properties within a function?

Is there a way to automate wrapping each child of an object with a function?

// current code
import authController from "./authController";
import appController from "./appController";
import userController from "./userController";
import postController from "./postController";
import { executeRequest } from "./utils";

const controllers = {
    user: { save: executeRequest(userController.save), 
            confirm: executeRequest(userController.confirm) },
    post: {
        save: executeRequest(postController.save),
    },
    auth: {
		signin: executeRequest(authController.signin),
		signout: executeRequest(authController.signout)
	},
	app: {
		get: executeRequest(appController.get)
	}

I am looking for a solution that would allow me to use the object in the following format:

// expectation
import authController from "./authController";
import appController from "./appController";
import userController from "./userController";
import postController from "./postController";
import { executeRequest } from "./utils";

// do something here to wrap the children

const controllers = {
   user: userController,
    auth: authController,
    post: postController,
    app: appController
};

import controllers from "../controllers";

const postController = controllers.post;
router.post(Routes.DEFAULT, postController.save);

Thank you!

Answer №1

If you want to list all the properties in your imports and pass them using the executeRequest function, you can follow this code snippet:

const controllers = {
   user: userController,
    auth: authController,
    post: postController,
    app: appController
};

const mappedControllers = Object.keys(controllers).reduce((controllerAcc, controllerCurr) => {
   
    controllerAcc[controllerCurr] = Object.keys(controllers[controllerCurr]).reduce((methodAcc, methodCurr) => {

       methodAcc[methodCurr] = executeRequest(controllers[controllerCurr][methodCurr]);
       return methodAcc;

     }, {})

     return controllerAcc;
}, {})

After running this block of code, your mappedControllers object will contain all the controllers along with their methods that have been passed through the executeRequest function.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript and CSS tabs with smooth transition effect

I want to create tabs that smoothly fade between each other when switching. The code I have works, but there's a slight issue. When transitioning from one tab to the previous one, there is a momentary glitch where the last tab briefly changes state be ...

Save the selected value from the dropdown menu and automatically check the corresponding checkbox when it

I'm attempting to update the 'value' of a checkbox once an item is chosen from a dropdown list and then the checkbox itself is clicked. I have created a jQuery function that captures the value from the dropdown list (I omitted the code for t ...

Permitting the inclusion of decimals in the isNaN function

My script currently has the capability to input a number in one textbox and calculate its equivalent in other textboxes. $("input[type=text]").keyup(function () { var number = parseFloat($(this).val()); var inc = parseFloat($(this).attr( ...

Choosing an SVG Circle Using TypeScript

I am facing an issue with selecting a simple SVG <circle> element in my DOM using TypeScript: <svg viewBox="0 0 200 200"> <circle cx="50" cy="50" r="45" id="myCircle"/> </svg> In ...

Preventing multiple clicks by toggling the HTML tag on and off

Here is the jQuery structure that I am currently working with: $(document).on('click', '.view-details', function () { $(this).prop("disabled", true); // API call1 // API call2 // API call3 $(this).prop("disabled" ...

Guide on routing error 500 globally to a specific page with React-Redux

Currently, I am utilizing the react-redux starter found at this link. I am seeking guidance on how to redirect all API 500 errors to a specific page. Can someone assist me with this? ...

Discovering the length of an array using JavaScript

I have a question that may seem silly: How can we accurately determine the length of an array in JavaScript? Specifically, I want to find the total number of positions occupied in the array. Most of you may already be familiar with this simple scenario. ...

The command "npm run build:css " is not functioning properly, but when I execute the script independently, it works fine

Recently, while working on a program using npm script on my Mac system, I encountered some issues. Despite having installed node-sass globally, running "npm run build:css" did not work as expected. The content of my package.json file can be viewed here. Th ...

Encountering an error in Cytoscape using Angular and Typescript: TS2305 - Module lacks default export

I am working on an Angular app and trying to integrate Cytoscape. I have installed Cystoscape and Types/cytoscape using npm, but I encountered an error when trying to import it into my project. To troubleshoot, I started a new test project before implement ...

The situation I find myself in frequently is that the Angular component Input

There seems to be an issue with a specific part of my application where the inputs are not binding correctly. The component in question is: @Component({ selector : 'default-actions', templateUrl : './default.actions.template.html&a ...

Update the span's content according to the user's input

Is it possible to update the value of a span to match that of an input field in HTML? HTML: <p style='font-size:150%'> Hey friend, I am <span id='name_display'>Anonymous</span>, I'd like to invite you to..... &l ...

Angular2: dynamic spinner directive for showing progress/loading overlay

Struggling to implement a loading indicator/overlay in Angular2 that can be added to any container div. When the boolean property isLoading changes, I want the div to grey out and display a spinning indicator, then revert back when the property changes. I ...

The elements appear tiny while the resolution is excessively large on the Ionic mobile device

I recently finished developing an Ionic project and successfully compiled it for both iOS and Android. Surprisingly, everything seems to be working fine on Android devices but I am encountering issues on iOS and when viewing the project from Chrome's ...

What modifications need to be made to the MEAN app before it can be deployed on the server?

Following a tutorial on Coursetro, I was able to successfully build an Angular 4 MEAN stack application. However, when it comes to deploying the app on a server running on Debian-based OS, I am facing some challenges. The application should be accessible o ...

Passing React components between components using dot notation

How can I pass a boolean Parent prop into a child component using dot notation with a functional component? The Component structure is: <Dropdown className="float-right"> <Dropdown.Title>Open menu</Dropdown.Title> <Dropd ...

Acquire data from an array of objects using JavaScript

I've written some code where I'm attempting to display certain values in HTML. Specifically, I am looking to extract the values from the "current" object: ("dt":1643884851, "temp":8.11, "description":"few clouds", and "icon":"02d") In addition, ...

"NodeJS Express: The intricacies of managing overlapping routers

While constructing a NodeJS express API, I have encountered a peculiar bug. It seems that some of the endpoints are overlapping, causing them to become unreachable as the request never completes and ends up timing out. For example: const load_dirs = (dirs ...

Develop a Vue component for a fixed sidebar navigation

I am in need of a vertical navigation bar positioned to the left of my app's layout, with the content extending across the right side. However, I am currently facing an issue where the navbar is pushing all the content downwards. How can I resolve thi ...

How to trigger a function to run only once in React when the page is accessed or refreshed

I'm currently developing a search feature using Algolia search functionality. Users can input a search term from another site, be redirected to the search page, and have the search executed automatically. Once on the search page, users must utilize t ...

Is it possible to save any additions made to the DOM using JavaScript into local storage, so that it can be retrieved even after the page is reloaded?

Let's consider a scenario for testing purposes: you have a function that appends <li> elements inside an <ol> container, and you want to retain all the list items added. Is there a way to store them in Local Storage (or any other local sto ...