accessing dynamic created objects .. js

Question

I can't access to objects that have been created inside cycle ..

// global var $subtypes //

...
... code ...
...

$subtypes = {};

for ( var $cols = 0; $cols < $subtypecols.length; $cols++ ) // Here i can got from 1 to 20 
{
    var columnName = 'column' + $cols; // column0, column1, column2 ... column20
    $subtypes.columnName = {  };  // creating empty object

    for ( var $rows = 0; $rows < $subtypeTableRows.length; $rows++ ) // from 1 to 10.
    {
        var rowNumber = 'row' + $rows; // row1, row2, row3 ... row7
        $subtypes.columnName.rowNumber = { 'count' : -1, 'price' : -1 };
    };
};
//console.log ( 'l ' +  $subtypes['column3']['row5'] ); //undefined is not an object (evaluating '$subtypes['column3']['row5']')
//console.log ( 'l ' +  $subtypes['column3']['row5'].count ); //undefined is not an object (evaluating '$subtypes['column3']['row5']')
//console.log ( 'l ' +  $subtypes[column3][row5].count ); //ReferenceError: Can't find variable: column3
//console.log ( 'l ' +  $subtypes[column3][row5] ); //ReferenceError: Can't find variable: column3
//console.log ( 'l ' +  $subtypes.column3.row5 ); //expected 'object', got: undefined is not an object (evaluating '$subtypes.column4.row2')

What am I doing wrong?

UPD 1: that code don't works..

for (var o = 0; o < 5; o++)
{
    var $prevNum = 'prev' + o;
    var $prevTxt = $nodelist[o].textContent

    $itemConfig = {     $itemWithPreviews : { $prevNum : $prevTxt }     }; 
    // i got string name '$prevNum' : and value from valiable $prevTxt.

    $itemConfig = {     $itemWithPreviews : { [$prevNum] : $prevTxt }   }; 
    // JS script can't start
};

UPD 2 :

var $root = {};
var $root[0] = {}; // data
var $root[1] = {}; // another data
var $root[2] = {}; // here will be stored buttons and rows.. 

for ( var $buttons = 0; $buttons < 10; $buttons++ ) // 10 buttons
{
    var buttonName = 'button' + $buttons; // button0, button1, button2 ... buttom9

    var objButton = { };
    objButton[buttonName] = { }; 
    $root[2].push( objButton ); //here all's ok: { "button0":{} }, { "button1":{} } ... 


    for ( var $row = 0; $row < 5; $row++ )
    {
        var rowNumber = 'row' + $row; // row0, row2 ... row4


        var objRow = { };
        objRow[rowNumber] = { }; 

        $root[2][buttonName].push ( objRow ); 
        // Expect.: { "button0": { "row0": { }, "row1": { }, "row2": { }, ...  } }, { "button1": { "row0": { }, "row1": { }, "row2": { }, ...  } } ... 
        // Got: ERROR: TypeError: undefined is not an object (evaluating '$root[2][buttonName].push')

        //same situation...
        $root[2][$buttons].push ( objRow );
        // Got: ERROR: TypeError: undefined is not a function (evaluating '$root[2][$buttons].push ( objRow )')

    };
};

Answer 1

You did:

$subtypes.columnName = {  };
$subtypes.columnName.rowNumber = { 'count' : -1, 'price' : -1 };

Which creates the object:

$subtypes["columnName"]["rowNumber"];

If you want to create $subtypes['column3']['row5'] then you need to do:

$subtypes[columnName] = {  };
$subtypes[columnName][rowNumber] = { 'count' : -1, 'price' : -1 };

Remember, the dot notation a.b.c is equivalent to a['b']['c']. Therefore your console.log()s could also be written as:

console.log ( 'l ' +  $subtypes.column3.row5 );

Update:

As for you follow-up question, when you do

$itemConfig = {$itemWithPreviews : { $prevNum : $prevTxt }}; 

You're creating the following object:

$itemConfig["$itemWithPreviews"]["$prevNum"] = $prevTxt;

Property names are not variables. They are always interpreted as literal string. Therefore $prevNum is "$prevNum" not "prev0" etc. Property values on the other hand ARE variables so $prevTxt would have the same value.

ES6 (otherwise known as ES2015) introduced a new syntax called computed property names that allows you to do what you want. The syntax for doing this uses the familiar square brackets:

$itemConfig = {[$itemWithPreviews] : {[$prevNum] : $prevTxt }};

However, as of January 2017 only Chrome, Firefox and Node.js support this syntax. This won't work in other browsers so you'd have to do it the oldschool way:

$itemConfig = {};
$itemConfig[$itemWithPreviews] = {};
$itemConfig[$itemWithPreviews][$prevNum] = $prevTxt;

You can initialise properties conditionally if you want to do this in a loop:

$itemConfig = {};

for (var o = 0; o < 5; o++) {
    var $prevNum = 'prev' + o;
    var $prevTxt = $nodelist[o].textContent;

    if ($itemConfig[$itemWithPreviews] === undefined) {
        $itemConfig[$itemWithPreviews] = {};
    }

    if ($itemConfig[$itemWithPreviews][$prevNum] === undefined) {
        $itemConfig[$itemWithPreviews][$prevNum] = {};
    }

    $itemConfig[$itemWithPreviews][$prevNum] = $prevTxt;
}

Answer 2

$subtypes.columnName will create literal columnName property. Use [] to use dynamic naming:

$subtypes = {};

for (var $cols = 0; $cols < 5; $cols++) {
  var columnName = 'column' + $cols;
  $subtypes[columnName] = {};

  for (var $rows = 0; $rows < 6; $rows++) {
    $subtypes[columnName]['row' + $rows] = {'count': -1, 'price': -1};
  };
};

console.log($subtypes);