Complex data structure organization in javascript? Upon suggestion in the original question within Stack Overflow, I'm bringing this question here.

Question Explained:

In a website that I built, I used complex multidimensional arrays to organize a multitude of information tables linked to events. I want to know if what I did was a viable efficient solution for the specific situation, or if something else would have made more sense, like using database tables or take an object oriented approach. 

This is what I did:

I built a set of dropdown menus with javascript, The first list (category) determined what items where shown on the second list (service). If the user hovered over a category, the correlating services were displayed on the second list. If the user selected a service, a list of items in that service where shown in another part of the page(itemlist). Each item on the itemlist had unique values, prices, and 2 possible types, either check boxes or numerical entries. 

Hopefully that will make the following array examples make sense. All you need to know further about these arrays is that they correlate to achieve the above result.

the below array is in image form for your convenience. Stack Overflow refused to keep my formatting, making it unreadable. 



There are over 20 copies of this (above) array item with different services.




  ServiceArray[0][0]:
  [0]is the id to be assigned to the element.
  ['1]is text name to be outputted.
  ['2]is a variable name to be assigned.
  ['3]is a key value to be appended to each item so I can call on a correlating value in the first array set.
  ['4]is an example to be listed  


the downsides to this approach are obvious. The complex array structures become difficult to manage. When working with the variables, I had to continuously recount each variable to find the array keys. In the end though, i was able to use this approach very dynamically for the drop-downs and service lists. Here are a few examples of the code used to dynamically generate the content with these arrays. 

$(".dropdown-service &gt; p").click(function () {
    var thisKey = $(this).data("key");
    $("#ServiceOutput").text($(this).text());
    $(".layer4").append('&lt;div class="ChoiceWrap"&gt;');
    for (var i = 0; i &lt; ServiceArray[Category][thisKey][4][1][5].length; i++) {

        var listId = ServiceArray[Category][thisKey][6][1][i][7];
        var listTitle = ServiceArray[Category][thisKey][8][1][i][0];
        var List = "";

        for (var x = 0; x &lt; ServiceArray[Category][thisKey][9][1][i][10].length; x++) {
            var Time = ServiceArray[Category][thisKey][11][1][i][12][x][13];
            var Content = ServiceArray[Category][thisKey][14][1][i][15][x][0];
            var Hours = ServiceArray[Category][thisKey][16][1][i][17][x][18];
            List += '&lt;div class="li"&gt;&lt;div class="selection"&gt;&lt;/div&gt;&lt;p data-time="' + Time + '"&gt;' + Content + '&lt;span class="orange"&gt; ('+ Hours +'Hrs)&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;';
        }

        $(".layer4").append('&lt;div id="' + listId + '" class="listContainer"&gt;&lt;h2&gt;' + listTitle + '&lt;/h2&gt;&lt;div class="ListWrapper"&gt;' + List + '&lt;/div&gt;&lt;/div&gt;');
    }
    $(".layer4").append('&lt;/div&gt;');
});


So the ultimate question: 

Is this method the best for the specific situation, or could I have done something more efficient to save time an effort while achieving the same result?
While there's nothing completely wrong with what you did, if I were the programmer coming in behind you - I would certainly curse your name.  Writing "good" code (to me of course) requires more than meeting the objectives.  Readability and maintainability are just as important.

My concern with your design didn't set in until I saw the sample code to build the menu. Seeing all those brackets and indexes just about melted my brain.  I think if you would use object literals rather than straight arrays then my problems go away as it should then be much more readable and straight forward.