How to retrieve the error messages text when receiving a json 422 response?

To retrieve and display the error messages from a JSON 422 response in JavaScript, you can follow these steps:

1. Parse the JSON response to extract the error keys.
2. Map these keys to the actual error messages defined in your validation.php file.
3. Display the error messages to the user.

Here's a step-by-step solution:

1. Fetch the JSON response and parse it:

fetch('/your-endpoint', {
  method: 'POST',
  body: JSON.stringify(yourFormData),
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  if (!response.ok) {
    return response.json().then(errorData => {
      throw errorData;
    });
  }
  return response.json();
})
.then(data => {
  // Handle success
})
.catch(errorData => {
  if (errorData.status === 422) {
    handleValidationErrors(errorData.errors);
  } else {
    // Handle other errors
  }
});

1. Map the error keys to the actual error messages:

You need to have a mapping of your validation keys to the actual messages. This can be done by creating a JavaScript object that mirrors your validation.php file.

const validationMessages = {
  'validation.required': 'The :attribute field is required.',
  // Add other validation messages here
};

function getErrorMessage(key, attribute) {
  let message = validationMessages[key];
  if (message) {
    return message.replace(':attribute', attribute);
  }
  return 'An error occurred';
}

1. Handle and display the validation errors:

function handleValidationErrors(errors) {
  const errorMessages = [];
  for (const [field, messages] of Object.entries(errors.errors)) {
    messages.forEach(messageKey => {
      const errorMessage = getErrorMessage(messageKey, field);
      errorMessages.push(errorMessage);
    });
  }
  displayErrors(errorMessages);
}

function displayErrors(errorMessages) {
  const errorContainer = document.getElementById('error-container');
  errorContainer.innerHTML = '';
  errorMessages.forEach(message => {
    const errorElement = document.createElement('p');
    errorElement.textContent = message;
    errorContainer.appendChild(errorElement);
  });
}

1. HTML to display errors:

Make sure you have an element in your HTML to display the error messages:

<div id="error-container"></div>

Putting it all together, your JavaScript code will fetch the response, handle the validation errors by mapping them to user-friendly messages, and display them in the designated HTML element. This approach ensures that your users see meaningful error messages instead of cryptic validation keys.