0

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

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

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

1
  • input on change event => input.value split(' ') => array.push({...})
    – InDevX
    15 мая 2021 в 18:44

1 ответ 1

0

Вариантов много, тут нужно исходить из дальнейших требований от кода, его масштабирования и т.д.
Можно например через 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>

1
  • В дальнейшем я хочу создать таблицу на странице и заполнить её объектами из полученного массива
    – Smekalinho
    16 мая 2021 в 14:49

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.