Develop Reference

I want to make Javascript object dynamic

Here is Code
var str = "Value1";
var str1 = "Value2";
var obj = {
[str]: str1
};
console.log(obj);
I am getting obj as
{
Value1:"Value2"
}
But I want this object as
{
"Value1":"Value 2"
}
Can any one explain how it is possible?

At first your code: var obj = {["Value1"]: "Value2"}; is wrong. You have to write:
var obj = {"Value1": "Value2"}; or var obj = {Value1: "Value2"};.
And then if I understood you correctly: in your comment you wrote:
I wana get Value1 in double quotes too dynamic means I want dynamic index too in double quotes
The answer:
Object {Value1:"Value2"} is the same like {"Value1":"Value2"}. The difference is to see in displaying (spelling, writing) of your code only.
For example you will not see the difference if you execute following code:
var myObj1 = {"Value1":"Value2"};
var myObj2 = {Value1:"Value2"};
console.log(myObj1.Value1); //Value2
console.log(myObj2.Value1); //Value2
console.log(myObj1["Value1"]); //Value2
console.log(myObj2["Value1"]); //Value2
console.log(JSON.stringify(myObj1)); //{"Value1":"Value2"}
console.log(JSON.stringify(myObj2)); //{"Value1":"Value2"}

How to use get the value from the nth child key of the object by using variable?

The question is similar to this: How do I interpolate a variable as a key in a JavaScript object?
However, I have a difficult on using variables on nth keys:
I had a object, which is:
var object = {};
object.foo = "foo";
object.foo.bar = "bar";
object.foo.bar.alice = "alice";
object.foo.bar.alice.bob = "bob";
I am able to get the value (foo) for object.foo by using the variable object["foo"]
But I cannot find out a way to access to object.foo.bar value.
I tried object["foo"]["bar"], but it does not work.
In addition to my question, how can I get the value for
object.foo.bar.alice
object.foo.bar.alice.bob
By using variable as well?
Thanks.

You need an object for foo, because foo is a primitive type.
var object = {};
object.foo = "foo";
object.foo.bar = "bar"; // does not work!
This works
var object = {};
object.foo = {};
object.foo.bar = "bar"; // work!

When you do
var object = {};
object.foo = "foo";
You define the property as string and it won't store the keys since it is a string literal not a string object.
you need to try
var object = {};
object.foo = new String("foo");
Now it can store more properties in object.foo.
var object = {};
object.foo = new String( "foo" );
object.foo.bar = new String( "bar" );
object.foo.bar.alice = new String( "alice" );
object.foo.bar.alice.bob = new String( "bob" );
console.log( object );

you need to assign as a object {key:value,key:value}
object.foo = {0:"foo",bar:{}};
object.foo.bar = {0:"bar",alice:{}};
object.foo.bar.alice = {0:"alice",bob:{}};
object.foo.bar.alice.bob = "bob";
console.log(object.foo.bar.alice);
console.log(object.foo.bar.alice.bob);

You can develop a simple function to get the nested objects and their keys dynamically. Such as the following. A similar approach would be sufficient for the set version as well.
Object.prototype.getNestedValue = function(...a) {
return a.length > 1 ? (this[a[0]] !== void 0 && this[a[0]].getNestedValue(...a.slice(1))) : this[a[0]];
};
var arr = [{fox: [{turn:[857, 432]}]}, {sax: [{pana:[777, 987]}]}, {ton: [{joni:[123, 567]}]}, {piu: [{burn:[666, 37]}]}, {sia: [{foxy:[404, 696]}]}],
myObj = {foo: {bar: {alice: {bob: "bob"}}}};
document.write("<pre>" + JSON.stringify(arr.getNestedValue(3,"piu",0,"burn",1),null,2) + "</pre>");
document.write("<pre>" + JSON.stringify(arr.getNestedValue(3,"piu",0,"burn"),null,2) + "</pre>");
document.write("<pre>" + JSON.stringify(myObj.getNestedValue("foo","bar","alice","bob"),null,2) + "</pre>");
Keep in mind that you can set your nested properties in an array in the order of appearance and then call like myDeeplyNestedObj.getNestedValue(...propsArray)

In javascript- save variable as a reference

var foo = {prop:1};
var bar = {prop:2};
var obj = {};
obj[foo] = 'value';
console.log(obj[bar]); //'value'
It is quite confusing why obj[bar] and obj[foo] are same now, whereas foo and bar are not same.

because
obj[foo]='value';
is the same as
obj["[object Object]"]='value';
Object keys are string so it's internally doing foo.toString()
and foo.toString() === bar.toString()
Every objects will return "[object Object]" if used as a key (not talking about arrays, numbers, strings..)
You'll need something that uniquely identify your objects, like below
var foo = {id:"foo", prop:1};
var bar = {id:"bar", prop:2};
var obj = {};
obj[foo.id] = 'value';
console.log(obj[bar.id]); //undefined

JavaScript inset variable into brackets

when I alert btnName it is not fetching the attr name and instead using the text btnName.
var btnName = orderBtn.attr("name");
var obj = {btnName:true,json:1};
I am sure this is possible, I just can;t figure it out.

You need to write it like this:
var obj = {json: 1}
obj[orderBtn.attr('name')] = true
There's no way to include an expression (such as a variable) as a key when constructing an object using literal notation.
var obj = {foo: 'bar'}
is essentially shorthand for
var obj = {'foo': 'bar'}
If you want to refer to a variable foo, you need square bracket notation:
var obj = {}
obj[foo] = 'bar'

var btnName = orderBtn.attr ("name");
var obj = { json: 1 };
obj [btnName] = true;

Use brackets if you want to use a variable as a key:
var obj = { json: 1 };
obj[btnName] = true;

quick question about JavaScript variables

Not sure what to search for here, so apologies if I'm repeating another question.
I'm wondering if there are any issues that I'm not aware of with using the following syntax in JavaScript:
var a = {};
var b = a.niceCoat = {};
Seems handy, but I just want to make sure...

That is perfectly fine, because a was declared previously. The expressions will be evaluated as
var a = {};
var b = (a.niceCoat = {});
I.e. it first assigns a new empty object to a.niceCoat and the result (the result of an assignment is the assigned value) to b.
But be aware of something like
var a = b = 'c';
which, again, is evaluated as
var a = (b = 'c');
Only a will be in local scope, b would be global. If you want b to be local too, you have to declare it beforehand: var b;. Something like var a = var b = .... does not work (not valid syntax).
Slightly off topic:
This method is indeed handy. Imaging you have an object of objects, something like:
var map = {
foo: {},
bar: {}
};
and you want to get the object for a certain key or create a new one if the key does not exists. Normally one would probably do:
var obj = map[key];
if(!obj) { // works because if the key is set, it is an object
obj = {}; // which evals to true
map[key] = obj;
}
// now work with obj
With the above method, this can be shortened to
var obj = map[key];
if(!obj) {
map[key] = obj = {};
}
And we can make it even shorter with the logical OR operator (||):
var obj = map[key] || (map[key] = {});
(though it might be less readable).

You can do that. a.niceCoat = {} will be evaluated first, which assigns the object to the property and also has the object as result, which you then can assign to the variable.
You should however be aware that b and a.niceCoat are now referencing the same object, so if you put anything in the object it will show up for both the variable and the property:
var a = {};
var b = a.niceCoat = {};
b.x = 42;
alert(a.niceCoat.x); // shows 42

There no issue with that. It's the same as:
var b = (a.niceCoat = {});
Which is the same as:
a.niceCoat = {};
var b = a.niceCoat; // Now b and a.niceCoat are the same object
Just be careful with declaring entirely new variables with it like:
var i = j = 0;
Which is the same as:
j = 0;
var i = j;
Notice how j is not declared with the var keyword.

this is how you create an empty object in javascript. nothing wrong with it.

Yep, absolutely valid.
E.g.
var a = {};
var b = a.niceCoat = {};
a.foo = function() { alert('foo!'); };
a.foo(); // shows the alert