Как создать новые ключи и свойства объекта на основе [значений]?- JavaScript

Question

Представьте себе объект, который создается, заполняется и изменяется в результате действий пользователя.Создание части, когда у меня есть проблема;).Пока я не подготовлю ключи для объекта заранее, JS не будет выделять свойства, так как ключи еще не созданы физически.

dataObj.run1 подготовлено заранее, поэтому function saveSelection(); не имеет проблем с его заполнением.

При переходе к следующему прогону (с использованием function goNext();) - run2 не заполняется, так как онне существует.

Что делать?Создать новый объект на основе функции конструктора и продолжать его нажимать?Есть еще идеи?

Мой код:

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

Вы должны создать контейнерный объект, если он еще не существует, затем вы можете назначить его свойства.

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

Попробуйте сначала создать свойство, а затем заполнить его.

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