Добавление в объект данных динамически

Question

Есть код который добавляется динамически. Нужно из элементов input забрать значения и закинуть их в объект. Ключ должен быть название класса, а значение - value элемента

<div class="add-field-data">
<!-- Этот код добавляется динамически
  <div class="form-field multi-input-data">
   <input type="text" name="description[]" class="description" placeholder="Description">
   <input type="text" name="value[]" class="value" placeholder="value">
  </div> -->
</div>

Написал такую функцию, но она не добавляет данные.

const getData = () => {
    return Array.prototype.map.call(document.querySelectorAll('.add-field-data'), function(el) {
        el.childNodes.forEach(function(el) {
            Array.prototype.map.call(el.childNodes, (element) => {
                return { [element.getAttribute('class')] : element.value };
            }) ;
        });
    });
}

Answer 1

const getData = () => [...document.querySelectorAll('.add-field-data')].reduce((obj, topEl) => {
    for(let formField of topEl.childNodes){
      if(!!formField.tagName){
        for(let input of formField.childNodes){
          if(input.tagName !== 'INPUT') continue;
          obj[input.getAttribute('class')] = input.value 
        }
      }
    }
    return obj;
}, {/*Это ваш объект, если вы хотите сюда добавить - прокиньте его в эту функцию как аргумент снаружи*/})


console.log(getData());

<div class="add-field-data">
  <div class="form-field multi-input-data">
   <input type="text" name="description[]" class="description" placeholder="Description" value="description value">
   <input type="text" name="value[]" class="value" placeholder="value" value="value value">
  </div>
</div>

Answer 2

Но если есть возможность, то класс в качестве ключа не стоит использовать, он там может быть не один. Лучше тогда data атрибут использовать.

 const getData = () => {
    return [...document.querySelectorAll('.add-field-data input')].reduce((sum,item) => {
        sum[item.className] = item.value;
        return sum;
    },{})
}

console.log(getData())

<div class="add-field-data">
  <div class="form-field multi-input-data">
   <input type="text" name="description[]" class="description" placeholder="Description">
   <input type="text" name="value[]" class="value" placeholder="value">
  </div>
</div>

Можно вывести массив объектов:

   const getData = () => {
  return [...document.querySelectorAll('.add-field-data > div')]
    .map(el => [...el.querySelectorAll('input')].reduce((sum,item) => {
    sum[item.className] = item.value;
    return sum;
  },{}))
}

console.log(getData())

  <div class="add-field-data">
  <div class="form-field multi-input-data">
   <input type="text" name="description[]" class="description" placeholder="Description">
   <input type="text" name="value[]" class="value" placeholder="value">
  </div>
  <div class="form-field multi-input-data">
   <input type="text" name="description[]" class="description" placeholder="Description">
   <input type="text" name="value[]" class="value" placeholder="value">
  </div>
  <div class="form-field multi-input-data">
   <input type="text" name="description[]" class="description" placeholder="Description">
   <input type="text" name="value[]" class="value" placeholder="value">
  </div>
</div>

БЛОГ НА HUSL

Добавление в объект данных динамически

Ответы (2 шт):