Daniel Cheung Daniel Cheung - 3 months ago 14
HTML Question

Jquery/JS - Create Objects Dynamically For Each Div Within

COMMENT FROM 2 YEARS LATER

This is one of my old posts. Basically, I wanted to create variables with dynamic names via functions with a string parameter and that the variables is stored globally outside the scope of the function and can be accessed later by any other functions.

But because I don't know the term "global" and so, I was having a hard time explaining.

Enjoy!




Backstory: So I wanted to build a JS library for my own interface webpages. The result is, if I add
<div class="window SOMENAME"></div>
within my
div#Environment
. The webpage will generate a working window. That I have done.

But some JS objects must be declared for this to work

window["window" + winname].bmaxheight = $(cwindow).height();


, So if I add a new window "
.window.s
"

<div class="window s">
<!--Each window(`div`) REQUIRES a `.window` class and a unique name(here, ".s"), there WILL be ONLY 2 classes.-->
...
</div>


, I had to hand type the following
object
declarations.

windows = new Object();
windows.bmaxwidth = 0;
windows.bmaxheight = 0;
windows.bmaxpositionx = 0;
windows.bmaxpositiony = 0;
//Each new window(`div`) REQUIRES a new object named with the string "window" and the name(here, "s") appended.


So how do you generate new JS
object
s dynamically for each new manual input of
div
(window) in a loop?

Meaning, if I just hand typed in the

<div class="window SOMENAME"></div>


, it will automatically declare the objects:

windowSOMENAME = new Object();
windowSOMENAME.bmaxwidth = 0;
windowSOMENAME.bmaxheight = 0;
windowSOMENAME.bmaxpositionx = 0;
windowSOMENAME.bmaxpositiony = 0;


Concept:

function loop() {
1.check all divs within $("#Environment") and make an array of names for new objects(above are "s" and "SOMENAME")(no problem)
2.generate new objects in a loop ("window" + "NAME" and declare bmaxwidth, bmaxheight...)
}


Please comment if more information is needed.

Answer

I could use the other syntax to access the variables. Because global variables are stored under window

window["SOMENAME"] = new Object();

It would work also with a variable inside

var k = "SOMENAME"
window[k] = new Object();

EDIT FROM 2 YEARS LATER

A better approach is to create some empty objects initially and globally, then later populate them with the respective "dynamic variables". In this way, data are organized better rather than dumping everything under window.

Example:

var fruitBasket = {};

function addFruit(name, fruitProperties) {
    /*Maybe some logics to determine whether the fruit already
      exists in the basket to make this function more useful
      than simply fruitBasket.SOMENAME = {SOMEOBJECT}*/
    fruitBasket[name] = fruitProperties;
}

function getFruit(name) {
    return fruitBasket[name];
}

addFruit("apple", {
    color: "red",
    growsOnTree: true
});

getFruit("apple");

Or you may even want to organize it better like this:

var fruitBasket = {
    storedFruits: {},
    addFruit: function(...) {...},
    getFruit: function(...) {...}
};
Comments