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\$
0

2 Answers 2

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\$
7
  • \$\begingroup\$ Could you make a working code using this? You don't have to make all indexes, just copy the first two. \$\endgroup\$ Jul 14, 2015 at 8:15
  • \$\begingroup\$ I've added a jQuery function for processing each section of the list. \$\endgroup\$
    – Killrawr
    Jul 14, 2015 at 8:33
  • 2
    \$\begingroup\$ There's no such thing as an 'JSON object'. \$\endgroup\$ Jul 14, 2015 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\$ Jul 14, 2015 at 8:46
  • \$\begingroup\$ You're welcome. But why that PHP? Why don't you just use array( ... )? \$\endgroup\$ Jul 14, 2015 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 and acknowledge that you have read and understand our privacy policy and code of conduct.

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