Show in errors from API in JavaScript

Question

I am beginner web developer.

I make my first project in due and laravel 8.

My API return me error: {"message":"The given data was invalid.","errors":{"email":["Taki email ju\u017c wyst\u0119puje."], "login":["Taki login ju\u017c wyst\u0119puje."]}}

I have this code:

axios.post(this.$apiAdress + '/api/administrators?token=' + localStorage.getItem("api_token"),
        self.record
      )
        .then(function (response) {
          if (response.data.status == 'success') {
            Swal.fire(
              'Sukces',
              'Rekord dodany poprawnie!@',
              'success'
            )
          } else {
            Swal.fire(
              'Błąd',
              response,
              'error'
            )
          }
          this.$router.replace({path: '/administrators/create'});
        }).catch(function (error) {
        if (error.response.data.message == 'The given data was invalid.') {
          Swal.fire(
            'Błąd',
            'Proszę wypełnić wszystkie pola oznaczone gwiazdką!',
            'error'
          )
          window.scrollTo({top: 0});
        }

In linę: error.response.data.message I have this errors.

I need print errors in Swal:

Swal.fire(
                'Błąd',
                '.... Here errors ....',
                'error'
              )

For example:

Swal.fire(
                    'Błąd',
                    'Taki email ju\u017c wyst\u0119puje. <br/> Taki login ju\u017c wyst\u0119puje.',
                    'error'
                  )

How can I make it?

Please help me

tromgy · Accepted Answer · 2021-11-02 21:16:57Z

1

You can just iterate over the errors object:

if (error.response.data.message == 'The given data was invalid.') {
    let error_details = ""

    for (let key in error.response.data.errors) {
        error_details += `${error.response.data.errors[key]}<br/>`
    }

    Swal.fire(
        'Błąd',
         error_details,
        'error'
    )
    // ...
}

answered Nov 2, 2021 at 21:16

tromgy

5,9134 gold badges23 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tauzN · Accepted Answer · 2021-11-02 20:48:03Z

0

This should work in this specific example:

Swal.fire(
  'Błąd',
  error.response.data.email + "<br />" + error.response.data.login,
  'error'
)

answered Nov 2, 2021 at 20:48

tauzN

7,4872 gold badges22 silver badges23 bronze badges

1 Comment

tarafikttes Over a year ago

I can't use this form: response.error.email because I don't know how many errors user can generated. Is possible make universal show this error from json: {"message":"The given data was invalid.","errors":{"email":["Taki email ju\u017c wyst\u0119puje."], "login":["Taki login ju\u017c wyst\u0119puje."]}} ?

Parking Master · Accepted Answer · 2021-11-02 21:26:59Z

0

You're printing an entire object which results in this:

"[object Object]"

You need to get the property FROM the object.

response.error.email
// Taki email ju\u017c wyst\u0119puje. <br/> Taki login ju\u017c wyst\u0119puje.

Or to print the object as string:

JSON.stringify(response);

You can also get the specific errors.

var errors = JSON.parse('{"message":"' + response.message + '","errors":' + JSON.stringify(response.errors) + '}');
// Object { ... }

edited Nov 2, 2021 at 21:26

answered Nov 2, 2021 at 20:48

Parking Master

6571 gold badge10 silver badges26 bronze badges

3 Comments

tarafikttes Over a year ago

I can't use this form: response.error.email because I don't know how many errors user can generated. Is possible make universal show this error from json: {"message":"The given data was invalid.","errors":{"email":["Taki email ju\u017c wyst\u0119puje."], "login":["Taki login ju\u017c wyst\u0119puje."]}} ?

Parking Master Over a year ago

Yes it is, JSON.stringify(response).

tarafikttes Over a year ago

This return me: {"message":"Request failed with status code 422","name":"Error","stack":"Error: Request failed with status code 422\n at createError (webpack-internal:///./node_modules/axios/lib/core/createError.js:16:15)\n at settle (webpack-internal:///./node_modules/axios/lib/core/settle.js:17:12)\n at XMLHttpRequest.onloadend (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:66:7)","config":{"transitional":{"silentJSONParsing":true,"forcedJSONParsing":true,"clarifyTimeoutError":false},"transformRequest":[null],"transformResponse":... not error

Collectives™ on Stack Overflow

Show in errors from API in JavaScript

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related