1
\$\begingroup\$

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 <= 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 <= length; b++) {
            var vector = what[b];
            $(where).append('<li><a href="' + what[b][0] + '" target="_blank">' + what[b][1] + '</a></li>');
        }
    }
    for (var c = 0; c <= 4; c++) {
        var d = wh[c];
        populate(c, d);
    }

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

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:

  1. The input data is the arrays called "what*", from 0 to any given number of arrays.
  2. The output is the folder-style type lists. Also, these lists are initially hidden and shown only onclick.
  3. The script must be using only JavaScript and jQuery.
\$\endgroup\$

migrated from stackoverflow.com Jul 14 '15 at 8:35

This question came from our site for professional and enthusiast programmers.

8
\$\begingroup\$

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) >= 0) {
        var selected_list_section = what_object.what[list_location];
        if (typeof(selected_list_section) === 'undefined') {
            return false;
        };
        for (var y = 0; y < selected_list_section.length; y++) {
            var selected_link = selected_list_section[y]; // The selected link
            var compiled_link = jQuery("<li><a></a></li>");
            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;
};
\$\endgroup\$
  • \$\begingroup\$ Could you make a working code using this? You don't have to make all indexes, just copy the first two. \$\endgroup\$ – VannTile Ianito Jul 14 '15 at 8:15
  • \$\begingroup\$ I've added a jQuery function for processing each section of the list. \$\endgroup\$ – Killrawr Jul 14 '15 at 8:33
  • 2
    \$\begingroup\$ There's no such thing as an 'JSON object'. \$\endgroup\$ – Ismael Miguel Jul 14 '15 at 8:43
  • \$\begingroup\$ I used PHP to create the JSON code and just applied var what_object, adjusted answer to JavaScript Object. Regards \$\endgroup\$ – Killrawr Jul 14 '15 at 8:46
  • \$\begingroup\$ You're welcome. But why that PHP? Why don't you just use array( ... )? \$\endgroup\$ – Ismael Miguel Jul 14 '15 at 8:51
5
\$\begingroup\$

Store the whats as an array:

var whats = [
    [ // what0
        {
            "url": "http://validator.w3.org/unicorn/",
            "title": "Unicorn"
        }
    ]

    [ // what1
    ]
]

Use jQuery for everything:

var hiding = document.getElementById("hiding" + elem),
buttonforhiding = document.getElementById("buttonforhiding" + elem);
$(hiding).hide();
$(buttonforhiding).click(function () {
    $(hiding).toggle();

Can be easily written as:

$("#hiding"+elem).hide();
$("#buttonforhiding"+elem).onClick(...);
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.