How to create new keys and properties of object based on [values] ? - JavaScript

Question

Imagine an object that is being created, filled and changed by user action. Creating part is when I have the problem ;). Unless I prepare the keys for the object before hand, JS won't allocate properties as the keys are not physically created yet.

dataObj.run1 is prepared beforehand therefore function saveSelection(); have no problem filling it in.

When I increment to the next run (using function goNext();) - run2 is not being filled as it is non existing.

What to do? Create new object based on constructor function and keep pushing it ? Any other ideas?

My code:

var dataObj = {
  run1 : {
    sel1 : {
      id : "",
      text : ""
    },
    sel2 : {
      id : "",
      text : ""
    }
  },
  run2 : {
    // how to fill it in automatically...
  }
};

var realCount = 1;
var runCount = "run1"; // any preetier version of the incremeant here - see function goNext();?

function saveSelection(that) {
 var selectId = that.id;
 var selectedOptionId = that.selectedIndex;
 var selectedOptionText = that.selectedOptions[0].text;
 
  dataObj[runCount][selectId].id = selectedOptionId;
  dataObj[runCount][selectId].text = selectedOptionText;
  
  console.log(dataObj);
};


function goNext () {
  // Reset selections:
  document.getElementsByClassName("select")[0].selectedIndex = 0;
  document.getElementsByClassName("select")[1].selectedIndex = 0;
  
  // Increase count:
  realCount++;
  
  var runCountTemp = runCount.slice(0,3);
  
  runCount = runCountTemp + realCount;
  
  console.log(runCount);
    
};

<div id="app">

  <select class="select" name="city" id="sel1" onchange="saveSelection(this);">
    
    <option value="0">London</option>
    <option value="1">New York</option>
    <option value="2">San Francisco</option>

  </select>

  <select class="select" name="color" id="sel2" onchange="saveSelection(this);">

    <option value="0">Blue</option>
    <option value="1">Red</option>
    <option value="2">Green</option>
    
  </select>
<!-- Commented out as immaterial to this question
<button onclick="goBack();" class="buttonBack">BACK</button>
-->  

<button onclick="goNext();" class="buttonNext">NEXT</button> 
   
</div>

Answer 1

You have to create the container object if it doesn't already exist, then you can assign to properties of it.

var dataObj = {
  run1 : {
    sel1 : {
      id : "",
      text : ""
    },
    sel2 : {
      id : "",
      text : ""
    }
  },
  run2 : {
    // how to fill it in automatically...
  }
};

var realCount = 1;
var runCount = "run1"; // any preetier version of the incremeant here - see function goNext();?

function saveSelection(that) {
 var selectId = that.id;
 var selectedOptionId = that.selectedIndex;
 var selectedOptionText = that.selectedOptions[0].text;
 
  dataObj[runCount] = dataObj[runCount] || {};
  dataObj[runCount][selectId] = dataObj[runCount][selectId] || {};
  dataObj[runCount][selectId].id = selectedOptionId;
  dataObj[runCount][selectId].text = selectedOptionText;
  
  console.log(dataObj);
};


function goNext () {
  // Reset selections:
  document.getElementsByClassName("select")[0].selectedIndex = 0;
  document.getElementsByClassName("select")[1].selectedIndex = 0;
  
  // Increase count:
  realCount++;
  
  var runCountTemp = runCount.slice(0,3);
  
  runCount = runCountTemp + realCount;
  
  console.log(runCount);
    
};

<div id="app">

  <select class="select" name="city" id="sel1" onchange="saveSelection(this);">
    
    <option value="0">London</option>
    <option value="1">New York</option>
    <option value="2">San Francisco</option>

  </select>

  <select class="select" name="color" id="sel2" onchange="saveSelection(this);">

    <option value="0">Blue</option>
    <option value="1">Red</option>
    <option value="2">Green</option>
    
  </select>
<!-- Commented out as immaterial to this question
<button onclick="goBack();" class="buttonBack">BACK</button>
-->  

<button onclick="goNext();" class="buttonNext">NEXT</button> 
   
</div>

Answer 2

Try creating the property first then populating it.

dataObj[runCount] = {};
dataObj[runCount][selectId] = {
    id: selectedOptionId,
    text: selectedOptionText
};