Javascript: Do I need a multi dimensional array, objects in an array or…?

Question

So I have a dynamic variable that could be any integer from 5 to < 99 decided by the user.

var topLevelMenusTotalNum

Each top level menu has 5 fixed properties that I want to store which are mostly integers and some long numbers. And then recall for use in my bit of code.

Whats is the bext way for me to store these values in a storage system that can be dynamic in size?

I'm guessing I should store each top level menu as an object, with the 5 properties, ie

menu1.property1 = 500
menu1.property2 = 23
...
menu1.property5 = 24.3445345644

But how can I dynamically create the menu1 , menu2 , menu3 etc objects depending on how many the user has created?

Should I create the objects in an array? Or something else?

Answer 1

Does the order matter? If so, use an array.

Does the name matter? If so, use an object with named properties.

Do neither matter? Then it doesn't really make a difference. Arrays are slightly easier to loop over.

Answer 2

if you have an object, you can dynamically add items to it like so:

var menus = {
    "menu1": {
        //properties
    },
    "menu2": {
        //properties
    } //etc...
}

then you could add to it like so:

menus['menu' + newMenuNR] = {'property1': 21, 'property2': 10} //<-- properties in there

this is fully dynamic and won't result in problems later on, to loop through the object, you could use a 2-dimentional loop.

for(menu in menus) {
    for(item in menu) {
        alert(item.['property1']); //displays property of item in menu in menus (replace property with your own property names)
    }
}

Answer 3

I will suggest you to use an object for top layer and each object will contain array as class member. Object will help you to create dynamically based on user and each object of user will contain an array which has five properties.

Answer 4

I would suggest doing it with objects as long as the parameters can be named.

If you need a lot of objects, just keep an array of objects to search/sort/filter.

 //Class (Hide this in some library script) var Menu = (function () { function Menu(parameters) { if (parameters === void 0) { parameters = {}; } this.node = document.createElement("ul"); this.items = []; this.width = 100; this.height = 100; this.name = ""; this.title = ""; this.children = []; //Apply parameters for (var key in parameters) { if (parameters.hasOwnProperty(key) && this.hasOwnProperty(key)) { this[key] = parameters[key]; } } //Apply node parameter this.node.title = this.title; //Add to static Menu._menus.push(this); } Menu.prototype.render = function () { //Reset contents this.node.innerHTML = ""; //Append sub-menues for (var childIndex = 0; childIndex < this.children.length; childIndex++) { var child = this.children[childIndex]; var li = document.createElement("li"); li.appendChild(child.render()); this.node.appendChild(li); } //Append generic items for (var itemIndex = 0; itemIndex < this.items.length; itemIndex++) { var item = this.items[itemIndex]; var li = document.createElement("li"); li.innerHTML = item; this.node.appendChild(li); } //Return node return this.node; }; Menu._menus = []; return Menu; }()); //Implementation //create menu var topMenu = new Menu({ items: ["Just testing"], title: "Super!" }); //Add anonymous submenues topMenu.children .push(new Menu({ items: ["item 1"], title: "sub", name: "sub1" }), new Menu({ items: ["item 3", "item 2"], title: "sub", name: "sub2" })); //Add to "bigList" document.getElementById("bigList").appendChild(topMenu.render()); //Updates incoming setTimeout(function () { //Find menu with the most items + children (Which is easy with named parameters) var m = Menu._menus .filter(function (a) { return a.title == "sub"; }).sort(function (a, b) { return (b.items.length + b.children.length) - (a.items.length + a.children.length); })[0]; //Add new item m.items.push("Sweet right?"); //Update node m.render(); }, 2000); setTimeout(function () { //Find last menu var m = Menu._menus .reverse()[0]; //Remove last item m.items.splice(m.items.length - 1, 1); //Update node m.render(); }, 4000); 

 <div id="bigList"> Named parameters are lovely :-) </div>