Use an array of objects to construct a new object that will call functions declared in the original array

Question

I am using a JS router for my new website project. The router accepts an object: the Key is the URL address and the Value is a function that will get called when the address is reached.

It gets messy pretty quickly with the amount pages and sub pages growing bigger and bigger, especially considering that different pages need to call different initialization functions (initAccordion or initDataTables, etc, etc).

Just to keep it neat I thought of creating an array of objects that will hold the page names and the init functions that need to be called after the page is loaded. However the solution I use uses eval:

function initFoo() {
    console.log("initFoo says hi");
}

function initBar() {
    console.log("initBar says hi");
}

var pages = [
    {
        name: "home",
        init: ["initFoo", "initBar"]
    },
    {
        name: "people",
        init: ["initBar"]
    }
];

var routerPaths = {};

for (var page in pages) {
    var url = pages[page].name;
    var init = pages[page].init;
    // construct the string for eval()
    var objStr = "routerPaths['" + url + "'] = function() {";
    for(var item in init) {
        objStr += init[item] + "();";
    }
    objStr += "};";

    eval(objStr);
}

routerPaths.home();  // as expected: initFoo says hi initBar says hi
routerPaths.people();  // as expected: initBar says hi

This all fine, but is there a way to perhaps have the pages.init array without the quotes and the object creator NOT using eval? So that the values would look like this init: [initFoo, initBar].

So my questions really are: Is there a way of creating the new routerPaths object without constructing a string and then running eval on it? Should I just stick with what I have?

Keep in mind that routerPaths.home, routerPaths.people need to be functions that call the functions from pages.init.

georg · Accepted Answer · 2017-07-16 09:42:56Z

1

There's no need to reference functions by their string names. Just use a function name like any other variable. var pages = [ { name: "home", init: [initFoo, initBar] }, { name: "people", init: [initBar] } ];

and write your init stubs as ordinary closures (note: it's imperative to use let and not var in the loop).

var routerPaths = {};

for (var page of pages) {
    let init = page.init;

    routerPaths[page.name] = function() {
        init.forEach(function(fn) { fn() })
    }
}

If you can't use ES6 for...of and let, replace them with `forEach:

pages.forEach(function(page) {
    var init = page.init;
    routerPaths[page.name] = function() {
        init.forEach(function(fn) { fn() })
    }
})

edited Jul 16, 2017 at 9:42

answered Jul 16, 2017 at 8:30

georg

216k57 gold badges324 silver badges401 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Damian Chrzanowski Over a year ago

This is a front-end router that I am using. Is your solution going to work in a browser?

georg Over a year ago

@DamianChrzanowski: added an example for older browsers

Damian Chrzanowski Over a year ago

Ok ill give it a go

yaswanthsvist · Accepted Answer · 2017-07-16 09:04:02Z

const initFoo=()=>{
    console.log("initFoo says hi");
}

const initBar=()=> {
    console.log("initBar says hi");
}

let pages = [
    {
        name: "home",
        init: [initFoo, initBar]
    },
    {
        name: "people",
        init: [initBar]
    }
];

let routerPaths = {
};

for (let page in pages) {
    let url = pages[page].name;
    let init = pages[page].init;
    Object.defineProperty( routerPaths ,  url , {
        value: ()=>{
            for(var item in init) {
                init[item]();
            }
        },  
        enumerable: true, // if enumerable is true then only you can see the people,home properties if you console.log
                          //if enumerable set to false you can not see the the property but you can still call routerPaths.people and it just works fine
    });
}
console.log(routerPaths);

routerPaths.home();  // as expected: initFoo says hi initBar says hi
routerPaths.people();  // as expected: initBar says hi

Collectives™ on Stack Overflow

Use an array of objects to construct a new object that will call functions declared in the original array

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related