CODEWITHSUNDEEP
javascriptjquery
Dipak
Dipak

Reputation: 939

create function with array index

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);
            }
        });
    }
})

Upvotes: 0

Views: 73

Answers (3)

Blue
Blue

Reputation: 22911

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));

Upvotes: 3

Manuraj Sebastian
Manuraj Sebastian

Reputation: 84

Try calling the function using the window command

window(function_name,parameters);

Upvotes: 0

dangee1705
dangee1705

Reputation: 3520

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);
        }
    });
}

Upvotes: 2

Related Questions