Почему Array (). Splice не работает для вставки значения в индекс?

Question

У меня есть пароль или модальность ввода OTP для проверки электронной почты и номера телефона пользователя.

<form>
 <span id="ap-email-otp" class="actions-pack-otp">
   <input type="tel" class="ap-otp-input" data-channel="email" data-index="0" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="email" data-index="1" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="email" data-index="2" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="email" data-index="3" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="email" data-index="4" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="email" data-index="5" maxlength="1" required>
 </span>
 <span id="ap-phone-otp" class="actions-pack-otp">
   <input type="tel" class="ap-otp-input" data-channel="phone" data-index="0" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="phone" data-index="1" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="phone" data-index="2" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="phone" data-index="3" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="phone" data-index="4" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="phone" data-index="5" maxlength="1" required>
 </span>
</form>

Я хочу обновить объект otp при каждом keyup событии.

otp = {};

$document.on('keyup', '.ap-otp-input', function (e){

    if( e.keyCode === 8 || e.keyCode === 37 ){
        $(this).prev(':input').focus();
    }
    else{
        $(this).next(':input').focus();
    }

    otp[$(this).attr('data-channel')] = Array(6).splice( $(this).attr('data-index'), 0, $(this).val());

});

Выходные данные:

otp{
  email : [], // Empty array
  phone : [], // Empty array
}

Ожидаемый вывод Значение ввода должно быть вставлено в его индекс данных.

Примечание. Названия "каналов", т. Е. Электронная почта, телефон и т. Д. c, непредсказуемы. Он динамически рассчитывается из атрибута канала данных входа.

Answer 1

Инициализируйте otp двумя пустыми массивами:

otp = { email: [], phone: [] };

Затем вы можете обновить эти массивы; нет необходимости создавать новый массив для каждого ключа:

otp[$(this).data('channel')][$(this).data("index")] = $(this).val();

Обратите внимание, что к атрибутам data- можно получить более легкий доступ с помощью метода jQuery .data().

Если ваш имена каналов не предсказуемы, все, что вам нужно сделать, это инициализировать массивы, когда вы увидите новый:

if (!otp[$(this).data('channel')])
  otp[$(this).data('channel')] = [];