create function with array index

Question

I have to create lot of functions that contain almost same pattern and coding.

Creating multiple function becomes more useful to use different purpose and pages for my project. For example:

    function cls(){
        $.ajax({  
            url:"crud/fetch.php",  
            method:"POST",  
            data:{cat:'cls'},
            success:function(data){
                $('#cls').html(data);
            }
        });
    }

    function stdt(){
        $.ajax({  
            url:"crud/fetch.php",  
            method:"POST",  
            data:{cat:'stdt'},
            success:function(data){
                $('#stdt').html(data);
            }
        });
    }


    function sec(){
    ......
    //same pattern
    }

    function pdl(){
    ......
    //same pattern
    }

I tried to contain these function in one function to reduce code that seems clean, easy for debugging and re-editing.

So I tried storing all desired function name in one array and create function using each index.

But I am getting Uncaught TypeError: cls is not a function. I have tried without using window[cat]. I think it is foolish way, but tried, hoping it can works. Please suggest how can I assign or create function using each array index value.

var menu = ["cls", "stdt", "sec", "pdl", "sub", "xsub", "cls_sub", "cls_xsub", "xam", "mrksch", "grdsch", "sclnfo"];
$.each(menu, function(i,cat){
    var ftch = window[cat];
    function ftch(){
        $.ajax({  
            url:"crud/fetch.php",  
            method:"POST",  
            data:{menu:cat},
            success:function(data){
                $('#"' + cat+ '"';).html(data);
            }
        });
    }
})

@FrankerZ, I'd tried this, but got same error Uncaught TypeError: cls is not a function — Dipak
– Dipak, Commented Sep 15, 2018 at 19:58
Shouldn't you create a single function and with cat as parameter and pass the relevant string while calling the function. That would be really clean. — user10340130
– user10340130, Commented Sep 15, 2018 at 20:00

Blue · Accepted Answer · 2018-09-15 20:35:58Z

3

You can use anonymous functions. Also, quick side note, you have a syntax error with $('#"' + cat+ '"';):

var menu = ["cls", "stdt", "sec", "pdl", "sub", "xsub", "cls_sub", "cls_xsub", "xam", "mrksch", "grdsch", "sclnfo"];
$.each(menu, function(i,cat){
    window[cat] = function () {
        $.ajax({  
            url:"crud/fetch.php",  
            method:"POST",  
            data:{menu:cat},
            success:function(data){
                $('#' + cat).html(data);
            }
        });
    }
});

Although, I would highly recommend that you create a custom variable/class, to avoid too much pollution to the global scope:

window.fetch = {};

var menu = ["cls", "stdt", "sec", "pdl", "sub", "xsub", "cls_sub", "cls_xsub", "xam", "mrksch", "grdsch", "sclnfo"];
$.each(menu, function(i,cat){
    window.fetch[cat] = function () {
        $.ajax({  
            url:"crud/fetch.php",  
            method:"POST",  
            data:{menu:cat},
            success:function(data){
                $('#"' + cat+ '"';).html(data);
            }
        });
    }
});

You can even make the above approach dynamic with a Proxy (This is just a demonstration, you should simply just create a function with a parameter):

var fetchMenu = new Proxy({}, {
  get: function(obj, cat, val) {
    return () => {
      console.log('Lets load ' + cat);
    };
  }
});

var menu = ["cls", "stdt", "sec", "pdl", "sub", "xsub", "cls_sub", "cls_xsub", "xam", "mrksch", "grdsch", "sclnfo"];


fetchMenu.cls();

Although, this appears to be an X/Y issue. What's your reasoning for doing this? Why not just create a function that takes a parameter for what to fetch?

function fetchCat(cat) {
    $.ajax({  
        url:"crud/fetch.php",  
        method:"POST",  
        data:{menu:cat},
        success:function(data){
            $('#' + cat).html(data);
        }
    });
}

Later on...you can do something as simple as:

$.each(menu, (i, cat) => fetchCat(cat));

edited Sep 15, 2018 at 20:35

answered Sep 15, 2018 at 19:57

Blue

23k7 gold badges69 silver badges102 bronze badges

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

4 Comments

user10340130 Over a year ago

Am I missing something?

user10340130 Over a year ago

No I mean can't OP create single function with a parameter and use that instead of creating multiple functions? It seems to defeat the whole point of functions.

Blue Over a year ago

Yeah, that's why I added the last code snippet @psinaught

Dipak Over a year ago

@FrankerZ, last one seems great. Thanks ! Man !!

dangee1705 · Accepted Answer · 2018-09-15 20:01:13Z

2

You are trying to call a string in this code

var ftch = window[cat];
function ftch(){

I'm guessing you think this means create a function called cat on the window object, which you are then defining with ftch, however this simply gets the object stored at window[cat] (which will be undefined) and then tries to create another function called ftch.

To fix this, simply change your code to:

window[cat] = function(){
    $.ajax({  
        url:"crud/fetch.php",  
        method:"POST",  
        data:{menu:cat},
        success:function(data){
            $('#"' + cat+ '"';).html(data);
        }
    });
}

edited Sep 15, 2018 at 20:01

answered Sep 15, 2018 at 19:57

dangee1705

3,5402 gold badges27 silver badges45 bronze badges

Comments

Manuraj Sebastian · Accepted Answer · 2018-09-15 20:04:41Z

0

Try calling the function using the window command

window(function_name,parameters);

answered Sep 15, 2018 at 20:04

Manuraj Sebastian

847 bronze badges

Collectives™ on Stack Overflow

create function with array index

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related