Добавить объект в объект, используя push ()

Question

Я перебираю некоторые элементы, чтобы добавить их значения в массив. Затем я помещаю все в объект, и это работает нормально, но я безуспешно пытаюсь добавить каждый elements[i] в качестве объекта и установить для него уникальное имя.

Как создать объект «шаги» с двумя объектами внутри с именами «name1» и «name2»?

var steps = [];
var elements = $("#roi--calc input");
var results = $('#results');

 results.on('click', function(){
    for (var i = 0; i < elements.length; i++) {
     if (elements[i].value.length != 0) {
       steps.push({
         value: elements[i].value
       });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<form id="roi--calc">
  <input type="text" id="input1" data-name="name1" />
  <input type="text" id="input2" data-name="name2" />
  <input type="submit" id="results" value="submit" />
 </form>

Answer 1

Я бы рекомендовал использовать объект вместо массива. Вы сохраняете значения в объекте, используя data-name элемента ввода в качестве ключа. Чтобы ваш объект всегда был актуальным, настраивайте его каждый раз, когда form перехватывает событие input:

const steps = {}

document.getElementById('roi--calc').addEventListener('input', function(evt) {
  const input = evt.target
  if (input.checked || input.value.length) {
    steps[input.dataset.name] = {
      value: input.value
    }
  } else {
    delete steps[input.dataset.name]
  }
  console.log(steps);
})

<form id="roi--calc">
  <input type="checkbox" value="checkbox" id="cb1" data-name="name0" />
  <input type="text" id="input1" data-name="name1" />
  <input type="text" id="input2" data-name="name2" />
</form>

Answer 2

Попробуйте это:

var steps = {};
var elements = $("#roi--calc input");
for (var i = 0; i < elements.length; i++) {
 if (elements[i].value) {
    steps[elements[i].name] = elements[i].value;
  }
}

Answer 3

Существует несколько концепций JavaScript, которые вы можете изучить в дальнейшем для решения этой проблемы:

• Массивы и объекты: https://frontendmayhem.com/javascript-arrays-objects/
• Глубина объектов: https://javascript.info/object
• Использование атрибутов данных: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Объединяя эти знания, мы можем реализовать примерное решение:

const steps = {};
const elements = $("#roi--calc input");
for (var i = 0; i < elements.length; i++) {
  const element = elements[i];
  const key = element.dataset.name;
  if ((elements[i].checked) || (elements[i].value.length != 0)) {
    if (!steps[key]) {
      steps[key] = [];
    }
    steps[key].push({
      value: elements[i].value
    });
  }
}

Answer 4

Вы можете использовать следующее:

var steps = {};
steps[elements[i].name] = elements[i].value;

<form id="roi--calc">
  <input type="text" id="input1" name="name1" />
   <input type="text" id="input2" name="name2" />
</form>