сделать элемент sweetalert2 динамическим через его html метод

На чтение 4 мин Опубликовано 24.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Проблема в вашем коде
Решение
Объяснение кода
Заключение

Вопрос или проблема

Как предсказывает заголовок, я хочу сделать HTML-элемент sweetalert2 динамическим.

Я использую библиотеку sweetalert2.
https://sweetalert2.github.io/

В частности, у меня есть массив с элементами внутри.
Моя цель – создать столько чекбоксов, сколько элементов в массиве.

Я пытался использовать foreach внутри метода html, который предоставляет sweetalert2, но, как вы можете легко увидеть из воспроизводимого примера ниже, я ничего не получаю.

const arr = ['Alex','Jasmine','Andrie','Elton','Susy'];

function test() {
Swal.fire({
    html: 
    arr.forEach(user => {
        `  
        <div>
            <input type="checkbox" id="user" name="user" value="">
            <label for="">User</label><br>
        </div>
        `
    }),
    focusConfirm: false,
  })
}

document.getElementById ("test").addEventListener ("click", test);

<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>

  <button type="button" id="test" class="button">
    Нажми
  </button>

Может кто-нибудь помочь мне? Можете сказать, где я ошибаюсь?

Вам следует аккумулировать все те значения, которые вы возвращаете из forEach, в длинную строку HTML. Это проще сделать с помощью reduce.

const arr = ['Alex', 'Jasmine', 'Andrie', 'Elton', 'Susy'];

function test() {
  Swal.fire({
    html: arr.reduce((agg, user, index) => {
      agg += `  
        <div>
            <input type="checkbox" id="user${index}" name="user" value="">
            <label for="user${index}">${user}</label><br>
        </div>
        `
      return agg;
    }, ''),
    focusConfirm: false,
  })
}

document.getElementById("test").addEventListener("click", test);

<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>

<button type="button" id="test" class="button">Нажми</button>

Ответ или решение

Чтобы создать динамический HTML-элемент с использованием библиотеки SweetAlert2, вам нужно правильно сформировать строку HTML на основе массива, содержащего элементы. В вашем примере вы хотите создать такой интерфейс, который будет содержать чекбоксы для каждого элемента массива. Давайте разберёмся, как это можно сделать оптимальным образом.

Проблема в вашем коде

Вы пытались использовать метод forEach для создания HTML внутри метода html библиотеки SweetAlert2, однако он не возвращает значение, что приводит к отсутствию нужного результата. Вместо этого рекомендуется использовать метод reduce, который позволяет аккумулировать значения, которые вы хотите вернуть в виде строки HTML.

Решение

Ниже представлен исправленный вариант вашего кода, в котором используется метод reduce для генерации HTML-строки на основе массива пользователей:

const arr = ['Alex', 'Jasmine', 'Andrie', 'Elton', 'Susy'];

function test() {
  Swal.fire({
    html: arr.reduce((agg, user, index) => {
      agg += `  
        <div>
            <input type="checkbox" id="user${index}" name="user" value="${user}">
            <label for="user${index}">${user}</label><br>
        </div>
      `;
      return agg;
    }, ''),
    focusConfirm: false,
  });
}

document.getElementById("test").addEventListener("click", test);

Объяснение кода

Создание массива: В коде находится массив arr, который содержит имена пользователей.
Определение функции: Функция test() инициализирует вызов SweetAlert2.
Метод reduce: Здесь используется reduce, который последовательно обрабатывает каждый элемент массива. Он принимает два параметра:
- agg: аккумулируемая строка HTML.
- user: текущий элемент массива.
- index: индекс текущего элемента.
Генерация HTML: Внутри reduce для каждого пользователя создаётся строка HTML с чекбоксом и соответствующей меткой. Эти строки аккумулируются в переменной agg.
Событие нажатия: В конце, ваше событие по нажатию кнопки с ID test отслеживается, вызывая функцию test.

Заключение

Использование reduce позволяет более эффективно формировать строку HTML на основе массивов, что делает код более чистым и читабельным. SweetAlert2 предоставляет мощный инструмент для создания настраиваемых диалоговых окон, и правильное использование методов JavaScript позволяет сделать их ещё более динамичными и интерактивными.

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