Populating lists with links from arrays I have the following configuration:



$('document').ready(function () {
    var what0 = [
        ["http://validator.w3.org/unicorn/", "Unicorn"],
        ["http://validator.w3.org/", "W3C Validation Service"],
        ["http://jigsaw.w3.org/css-validator/", "W3c CSS Validator"],
        ["http://text-compare.com/", "Text Compare!"]
    ],
        what1 = [
            ["https://imgflip.com/", "Imgflip.com"],
            ["http://jpillora.com/base64-encoder/", "Base64 Encoder"],
            ["http://www.showmycode.com/", "Adobe Flash Decompiler"],
            ["http://jsbeautifier.org/", "Beautify Js"]
        ],
        what2 = [
            ["http://plnkr.co/edit/?p=catalogue", "Plunker"],
            ["http://www.css3maker.com/index.html", "CSS3 Generator"],
            ["http://daneden.github.io/animate.css/", "Animate.css"],
            ["http://site.youidraw.com/", "YouDraw"]
        ],
        what3 = [
            ["http://realfavicongenerator.net/", "Favicon Generator"],
            ["http://grabicon.com/", "Grabicon"],
            ["http://www.buildmypinnedsite.com/en", "Windows 8.1 tile"],
            ["https://kraken.io/web-interface", "Kraken.io"]
        ],
        what4 = [
            ["http://ideone.com/rran1v", "C++0x Compiler"],
            ["http://webcompiler.cloudapp.net/", "online C++ compiler"],
            ["http://www.color-hex.com/", "Color Hex"],
            ["https://icomoon.io/app/#/select", "IcoMoon App"]
        ],
        wh = [what0, what1, what2, what3, what4];

    function Toggle(elem) {
        var hiding = document.getElementById("hiding" + elem),
            buttonforhiding = document.getElementById("buttonforhiding" + elem);
        $(hiding).hide();
        $(buttonforhiding).click(function () {
            $(hiding).toggle();
        });
    }
    for (var a = 0; a &lt;= 4; a++) {
        Toggle(a.toString());
    }

    function populate(one, two) {
        var where = document.getElementById("hiding" + one),
            what = two,
            length = what.length - 1;
        for (var b = 0; b &lt;= length; b++) {
            var vector = what[b];
            $(where).append('&lt;li&gt;&lt;a href="' + what[b][0] + '" target="_blank"&gt;' + what[b][1] + '&lt;/a&gt;&lt;/li&gt;');
        }
    }
    for (var c = 0; c &lt;= 4; c++) {
        var d = wh[c];
        populate(c, d);
    }

});
ul {
    list-style-type:none;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;ul&gt;
    &lt;li&gt;
        &lt;div id="buttonforhiding0"&gt;Folder 1&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;ul id="hiding0"&gt;&lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;div id="buttonforhiding1"&gt;Folder 2&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;ul id="hiding1"&gt;&lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;div id="buttonforhiding2"&gt;Folder 3&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;ul id="hiding2"&gt;&lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;div id="buttonforhiding3"&gt;Folder 4&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;ul id="hiding3"&gt;&lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;div id="buttonforhiding4"&gt;Folder 5&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;ul id="hiding4"&gt;&lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;




Its role is to populate some lists with the links in the what0, what1, what2, etc. arrays. It is working fine, but I was interested if you can come up with a code that is more efficient.

The requirements are:


The input data is the arrays called "what*", from 0 to any given number of arrays.
The output is the folder-style type lists. Also, these lists are initially hidden and shown only onclick.
The script must be using only JavaScript and jQuery.
Your what variable would be more accessible if it was just an JavaScript Object (w3school javascript objects), instead of list of lists.

var what_object = {
    "what": [
        [
            {
                "link": "http://validator.w3.org/unicorn/",
                "text": "Unicorn"
            },
            {
                "link": "http://validator.w3.org",
                "text": "W3C Validation Service"
            },
            {
                "link": "http://jigsaw.w3.org/css-validator/",
                "text": "W3c CSS Validator"
            },
            {
                "link": "http://text-compare.com/",
                "text": "Text Compare!"
            }
        ],
        [
            {
                "link": "https://imgflip.com/",
                "text": "Imgflip.com"
            },
            {
                "link": "http://jpillora.com/base64-encoder/",
                "text": "Base64 Encoder"
            },
            {
                "link": "http://www.showmycode.com/",
                "text": "Adobe Flash Decompiler"
            },
            {
                "link": "http://jsbeautifier.org/",
                "text": "Beautify Js"
            }
        ]
    ]
};


I have only done indexes 0, and 1.

jQuery.fn.loadWhatList = function(list_location) {

    if (Number(list_location) &gt;= 0) {
        var selected_list_section = what_object.what[list_location];
        if (typeof(selected_list_section) === 'undefined') {
            return false;
        };
        for (var y = 0; y &lt; selected_list_section.length; y++) {
            var selected_link = selected_list_section[y]; // The selected link
            var compiled_link = jQuery("&lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;");
            compiled_link.find('a').attr('href', selected_link.link);
            compiled_link.find('a').html(selected_link.text);
            // Can also do all of your Click Events in here too...
            compiled_link.click(function(e) {
                jQuery(this).toggle();
            });
            // Load the compiled_link to the ELEMENT
            jQuery(this).append(compiled_link);
        };
        return true;
    };

    return false;
};