Как вывести все элементы массива JS

Question

У меня с бека приходят ошибки валидации и мне нужно показать их пользователю. Сейчас отображается только последняя ошибка. Как я понял они перезаписывают друг друга. Как можно исправить что бы все ошибки показались?

$.each(data.errors, function(key, value){
    $('.alert-danger').html(
        '<p>'+value+'</p>'
    );
});

Answer 1

Помещаете все ошибки в переменную
Передаете переменную в html()

Пример:

let data = {
  errors: ['123', '456']
}

function onClickBtn() {

  let newHTML = '';

  $.each(data.errors, function(key, value) {
    newHTML += `<p>${value}</p>`
  });

  $('.alert-danger').html(newHTML);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='alert-danger'></div>

<button onclick="onClickBtn()">Вывести ошибку</button>

Answer 2

Как можно исправить что бы все ошибки показались?

Например можно вот так показывать ошибки...

const data = {
  errors: ['Ошибка 1', 'Ошибка 2', 'Ошибка 3', 'Ошибка 4']
}
$('.alert-danger').empty()
$.each(data.errors, function(key, value) {
  $('.alert-danger').append('<p>' + value + '</p>');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='alert-danger'></div>

Или вот так

const data = {
  errors: ['Ошибка 1', 'Ошибка 2', 'Ошибка 3', 'Ошибка 4']
}
const val = data.errors.join('</p><p>')
$('.alert-danger').html(`<p>${val}</p>`)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='alert-danger'></div>

БЛОГ НА HUSL

Как вывести все элементы массива JS

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