Axios js showing error problem

This code updates a record with no problem.

        const buttonForm = document.getElementById("submitBtn");
        buttonForm.addEventListener("click", async (event) => {
            event.preventDefault();
            alert("hello");
            const data = {petid: document.getElementById('petid').value,
                species: document.getElementById('species').value,
                _token: document.getElementsByName("_token")[0].value,
                _method: document.getElementsByName("_method")[0].value};
            var url = '<?= DIR . "pet/petupdate" ?>';

            axios({
                method: "put",
                url: url,
                data: data,
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
            })

                    .then(function (response) {
                        console.log(response.data);
                        if (response.status === 200) {
                            alert(response.status);
                            const data = response.data;
                            console.log(data);
                            var div = document.getElementById('msg');
                            document.getElementById("msg").style.display = "block";
                            for (var key in data) {
                                div.innerHTML += " " + data[key];
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                        var div = document.getElementById('msg');
                        document.getElementById("msg").style.display = "block";
                        for (var key in error) {
                            div.innerHTML += " " + error[key];
                        }
                    });
        });

However when I purposely leave out species, instead of the correct error showing, it shows a crazy long error.

In the network tab response what shows is:

species	[ "The species field is required." ]

Which is correct. But I cannot get this to show in the division.

Instead what shows in the division is:

fe@http://localhost/laravel11/assets/js/axios.min.js:1:18211 We@http://localhost/laravel11/assets/js/axios.min.js:1:31184 f@http://localhost/laravel11/assets/js/axios.min.js:1:35913 EventHandlerNonNull*it Request failed with status code 422 AxiosError ERR_BAD_REQUEST [object Object] [object XMLHttpRequest] [object Object] function fe(e,t,r,n,o){Error.call(this),Error.captureStackTrace?Error.captureStackTrace(this,this.constructor):this.stack=(new Error).stack,this.message=e,this.name="AxiosError",t&&(this.code=t),r&&(this.config=r),n&&(this.request=n),o&&(this.response=o)} function(){return{message:this.message,name:this.name,description:this.description,number:this.number,fileName:this.fileName,lineNumber:this.lineNumber,columnNumber:this.columnNumber,stack:this.stack,config:ce.toJSONObject(this.config),code:this.code,status:this.response&&this.response.status?this.response.status:null}}

I just want the 422 species [ "The species field is required." ] to show.

I also tried with:

                    .catch(function (response) {

jlrdw

1 year ago

Best Answer

Level 75

After around 10 stackoverflow reads I got it:

Changed error to:

                    .catch(error => {
                        if (error.response) {
                            console.log(error.response.data);
                            let err = error.response.data;
                            var div = document.getElementById('msg');
                            document.getElementById("msg").style.display = "block";
                            for (var key in err) {
                                div.innerHTML += " " + err[key];
                            }
                        }
                    });

Axios js docs wasn't real clear on this.

Any better suggestions welcomed. There example just shows error:

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Please or to participate in this conversation.