A guide to retrieving data from key-value pairs using Vue.js

Utilizing rails on the backend and vue.js on the front end, I am attempting to display any errors that may occur. Despite having an error within the .catch block, I am unable to extract the message from it. Any assistance in resolving this issue would be greatly appreciated.

.catch(function (error) {
 debugger
});

When I attempt error.response.data.error in the console, it returns 

'{:message=>"Amount is less than the minimum value"}'
. I am struggling to isolate just the message itself.

https://i.sstatic.net/51LYr.png

https://i.sstatic.net/Cqqad.png

Error Solution

https://i.sstatic.net/5AFlG.png

javascriptvue.jsdebuggingtry-catch

Answer №1

The serialization of your backend is not handling objects properly, causing the message to be embedded within a string rather than being a JSON property. If you prefer to keep it that way, you can utilize the following workaround:

const message = error.response.data.error.substring(
    str.indexOf('"') + 1, 
    str.lastIndexOf('"')
);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What methods can I utilize to increase the speed of my JavaScript animation?

Recently, I implemented a Vue component designed to loop a div over the X axis. While it functions correctly, I can't help but notice that it is consuming an excessive amount of CPU. I am interested in optimizing this animation for better performance. ...

javascripthtmlcssvue.jscss-transitions

AngularJS combined with MVC is causing an issue where the table fails to refresh following an HTTP post request

When working with an $http.post() call and trying to update an HTML table in the success() callback, I encountered an issue: .success(function (data) { $scope.categories.push(data); }); Here is the HTML code for the table: <tbody> ...

javascriptangularjsasp.net-mvcangularjs-ng-repeat

ts-jest should replace the character '@' with the '/src' folder in the map configuration

I have set up a node project using TypeScript and configured various paths in my tsconfig.json file, such as: "paths": { /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl' ...

javascriptnode.jstypescriptjestjsts-jest

Vue: Conditionally importing SCSS when a component is instantiated

My goal is to import Material SCSS exclusively for my Admin component. While this setup works smoothly during local development, the issue arises when I deploy my site to Firebase hosting - the Material styles start affecting not just my Admin component, ...

javascriptvue.jssass

Using AngularJS and SpringMVC for uploading multiple files at once

Having recently delved into the world of angularJS, I've been attempting to upload a file using angular JS and Spring MVC. However, despite my efforts, I have not been able to find a solution and keep encountering exceptions in the JS Controller. Bel ...

javascriptangularjsspring-mvc

Dealing with an unexpected quantity of parameters in a jQuery.when.apply situation

Being new to programming in JavaScript, I am looking for a way to trigger multiple requests while preserving the order and ignoring any errors. After researching the documentation and code, I have come up with the following pattern: var requests = []; for ...

javascriptjquery

Issue with firing the React-Redux action has been encountered

I am currently utilizing React along with react-redux, redux and redux-actions. Within my application, I have a specific action that is responsible for verifying the validity of the token stored in localStorage to ensure it is not expired. This action loo ...

javascriptreactjsredux

Resend the octet-stream data from an external API

I'm currently facing a challenge with retransmitting data received as octet-stream from an external API in my nodejs application. My previous attempts to convert the API response into a buffer and send it using res.write(buffer(apiResponse.data)) have ...

javascriptnode.jsexpress

Using event.target to pass HTML form data to FormData is causing an error stating that the Argument of type 'EventTarget' cannot be assigned to a parameter of type 'HTMLFormElement'

Looking to extract data from a form and store it in FormData: const handleSubmit = (e: FormEvent<HTMLFormElement>) => { e.preventDefault(); const formData = new FormData(e.target as HTMLFormElement); const value = formData.get(' ...

javascriptreactjstypescript

What is the best method for ensuring image orientation is displayed correctly?

When utilizing multer node and express for uploading images to my application, I've noticed that some of the images appear rotated 90 degrees once they reach the client side. What could be causing this issue, and how can I resolve it? Just to clarif ...

node.jsexpressvue.jsmulter

Vue.js having compatibility issues with Semantic UI dropdown feature

I have recently started exploring Vue.js and I must say, I really enjoy using Semantic UI for my projects. In Semantic UI, dropdowns need to be initialized using the dropdown() function in semantic.js. This function generates a visually appealing HTML str ...

javascripthtmldrop-down-menuvue.jssemantic-ui

Resize all types of content using a "zooming" container

Is there a way to create a magnifying effect without duplicating content and still keep the underlying elements clickable? Check out this jsfiddle example I am looking for a solution to scale the underlying div within the magnifying zoom without cloning ...

javascriptjqueryhtmlcss

Angular's watch feature fails to trigger when the value is modified

My setup includes two sliders, one for brightness and the other for contrast. They are linked to a "brightness" model and a "contrast" model. These sliders are located within a tab interface, and I noticed that every time the tab was changed, the values we ...

javascriptangularjsmaterial-design

Nested AJAX call yields undefined value

In my Test.vue component, I have a method that is imported into my main.js. I can call its methods like this: this.$refs.test.testMethod(). There is another method in Test.vue called ajaxMethod(), which is defined as follows: function ajaxMethod(){ t ...

javascriptvuejs2

The functionality of event bubbling appears to be ineffective while utilizing a bootstrap modal in an AngularJS application

I have a question regarding the use of Bootstrap modal. To begin with, I apologize for any issues in understanding my question due to my English skills. I have created a button as a directive to dynamically add, with reference to the following links. . ...

javascriptangularjstwitter-bootstrapangularjs-directivebootstrap-modal

Tips for activating a responsive object on the DOM using the Nuxt Composition API

After fetching data from the API, I noticed that my reactive form object was not updating on the DOM even though it changed in the console.log() when I refreshed the page. When the DOM is mounted, I populate my form object, but because it's a reactiv ...

vue.jsnuxt.jsvuejs3vue-composition-api

Utilizing VUEJS 3 to incorporate lists into firebase

I have a collection of items called 'order' that I want to store in my cloud firestore database. order: [ { product: 'Coffee', productivity: '20', quantity: '8', }, ...

javascriptfirebasevue.jsgoogle-cloud-firestorepinia

Is it possible to utilize index as a unique identifier for React Components?

In my React application, I have a list with the following requirements: Only new elements are added to the end of the list. When an element is removed, it is always the last element in the list. Considering these conditions and the fact that I do not ne ...

javascriptarraysreactjs

Callbacks associated with saving Backbone models are not properly executing

I am working on a small application with a model named JobStatuses in Backbone/Express that needs to be synchronized occasionally. According to the Backbone documentation: save method allows success and error callbacks in the options hash, which will re ...

javascriptbackbone.jsexpresscoffeescript

Utilizing module.exports and ES6 for exporting imports

I am currently facing an issue trying to import a function into a file and then export it from that file. It seems like a fairly straightforward task, but for some reason I am having trouble getting it to work. search_action.js function search_actions() ...

javascriptnode.jsecmascript-6