Object within object add property with JavaScript

Question

I have an object within an object. It looks like this.

 var myLib = {
     object1: {}
 }

My basic problem is that I wanted to end up like this. So I would like to do this dynamically I will not know the property's or additional objects until run time.

var myLib = {
    object1: ({"A1":({"Color":"Blue",
                      "height":50})
    })
}

From reading here on Stack Overflow I know that I can create an object within an object by simply going like this:

  myLib.Object1["A1"] = "Something"

But this does not produce what I'm looking for.

I tried this syntax which I know is wrong but basically

 mylib.Object1["A1"].["color"]="Blue";

so basically here is the question. I would like to create object "A1" under "mylib.Object" and immediately add property color = "blue" to "A1". I would need to do this for several other properties, but if I can figure out how to do this for one, I can figure it out for the rest. How can I accomplish this task?

No jQuery, please. Just plain old JavaScript is what I'm looking for.**

Once I create the object and properties I would imagine I can just use a for loop to loop through the properties for that object. Like so:

for(key in mylib.Object1["A1"]){}

Right?

seems like it its but if i try this i get an error myLib.Object1["A1"]["color"]="Blue"; error is myLib.Object1 "A1" is undefined. — Miguel
– Miguel, Commented Feb 26, 2012 at 17:05

jfriend00 · Accepted Answer · 2012-02-26 17:09:55Z

4

You can create it all from scratch like this:

var myLib = {};
myLib.object1 = {};

// assuming you get this value from your code somewhere
var x = "A1";   

myLib.object1[x] = {Color: "Blue", height: 50};

Or, if all values are in variables:

var myLib = {};
myLib.object1 = {};

// assuming you get this value from your code somewhere
var x = "A1";   

var colorProp = "Color";
var colorPropValue = "Blue";
var heightProp = "height";
var heightPropValue = 50;
myLib.object1[x] = {};    // create empty object so we can then add properties to it
myLib.object1[x][colorProp] = colorPropValue;   // add one property
myLib.object1[x][heightProp] = heightPropValue; // add another property

These syntaxes create identical results:

myLib.object1.A1 = {};

var x = "A1";
myLib.object1[x] = {};

The first can only be used when the property name is known when you write the code and when the property name follows the proper rules for a javascript identifier. The second can be used any time, but is typically used when the property name is in a variable or when it doesn't follow the rules for a javascript identifier (like it starts with a digit).

edited Feb 26, 2012 at 17:09

answered Feb 26, 2012 at 17:04

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Miguel Over a year ago

Absolutely Genius thanks for taking the time to explain this to me. This it awesome. I had a conceptual and syntactical problem and you solved them both. Thank you sir!

Collectives™ on Stack Overflow

Object within object add property with JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related