Добавление нового объекта в массив через поле input

Question

подскажите, как реализовать такой кейс: Есть форма с инпутами для добавления нового человека (ФИО). Есть массив объектов. Каждый объект вида

{
  name: Иван,
  lastName: Иванов,
  middleName: Иванович
}

При вводе в инпуты нужно добавлять в массив объектов нового человека

Answer 1

Вариантов много, тут нужно исходить из дальнейших требований от кода, его масштабирования и т.д.
Можно например через class что-то подобное сделать.

let forms = document.querySelector('#forms');

class Forms {
  constructor(elem) {
    this._arr = [];
    this._obj = {};
    elem.addEventListener('change', this.changeFunc.bind(this));
  }

  generateObj(id, value) {
    if (value) {
      this._obj[id] = value;
      this.objectCheck();
    } else {
      delete this._obj[id];
    }
  }

  objectCheck() {
    console.log('В объекте сейчас: ', this._obj);

    if (Object.keys(this._obj).length == 3) {
      this._arr.push(this._obj);

      console.log('Finish array', this._arr);
      this.clearInputs();
    }
  }

  changeFunc(ev) {
    let id = ev.target.id;
    if (id) {
      this.generateObj(id, ev.target.value);
    }
  }

  clearInputs() {
    forms.querySelectorAll('input').forEach((el) => el.value = "")
  }
}

new Forms(forms);

<div id="forms">
  <input id="name" type="text" placeholder="Имя">
  <input id="surname" type="text" placeholder="Фамилия">
  <input id="middleName" type="text" placeholder="Отчество">
</div>

БЛОГ НА HUSL

Добавление нового объекта в массив через поле input

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