CODEWITHSUNDEEP
javascriptarraysobject
Slab
Slab

Reputation: 363

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

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, i.e.

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?

Upvotes: 0

Views: 56

Answers (4)

Emil S. J&#248;rgensen
Emil S. J&#248;rgensen

Reputation: 6366

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>

Upvotes: 0

Ajit Kumar
Ajit Kumar

Reputation: 1

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.

Upvotes: 0

Grey
Grey

Reputation: 891

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)
    }
}

Upvotes: 1

Quentin
Quentin

Reputation: 944546

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.

Upvotes: 3

Related Questions