список ошибок показывает в консоли, но только одна ошибка показывает в div

Question

Я использую экспресс-валидатор для проверки формы и использую axios для отправки данных на сервер. После проверки я отправляю ответ обратно. Я могу зациклить ошибки и отобразить их все в консоли, одну под другой, но в моем файле ошибок, где я хочу показать ошибки пользователю, он показывает только одну, а не все, как в консоли.

Контроллер:

  if (!errors.isEmpty()) {
    return res.status(422).json({error: errors.array()});
  }

Показать ошибки пользователю:

  const errorLoop = error.response.data.error;
  for (const errMsg of errorLoop) {
    console.log(errMsg.msg);
    const showError = document.querySelector('.error');
    showError.classList.add("notification");
    showError.innerHTML = errMsg.msg;
  }

Answer 1

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

Попробуйте:

let errorMessages = ""
for(const errMsg of errorLoop){
    errorMessages += errMsg.msg + "<br>"
}
const showError = document.querySelector('.error')
showError.classList.add("notification")
showError.innerHTML = errorMessages

(<br> вставит новую строку для визуальных целей)