Vue.js - Axios Get request received an object response

My current project is built on Vue.js and I am using Flask for the API. The issue arises when trying to make an axios.get request - the API returns an object 'Object'. Interestingly, when testing the same request in Postman, it works fine and returns the expected data.

Below is a snippet of my code:

<script>

   import axios from 'axios'

   const URL = 'http://localhost:8080/'

   mounted(){

   axios.get(URL + "/KPI/get_category/1").then(response=>{
   for (const data in response.data) {
              this.kalite.push(JSON.parse(JSON.stringify(response.data[data])))
    }  

    for(const data in this.kalite){

      axios.get(URL + "/KPI/get_last_input/"+this.kalite[data] 
      ['id']).then(response=>{
                
                 console.log("response " + response)
    
       })
    }
})
 }
 </script>

Upon checking the console, I see the following message: response [object Object]

Answer №1

Experiment by using console.log(response.data)

Answer №2

When working with Axios, retrieving JSON data can be done by accessing response.data.

Alternatively, if you are using fetch, you can achieve the same result with await response.json().

To deepen your understanding of the data being received, make sure to explore the Network tab in DevTools. This allows you to inspect the response and gain insights into the data structure. Don't forget to utilize the feature to Inspect a resource's details.

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

The deployment on heroku encountered an error during the build process

I'm attempting to deploy my React application on Heroku, but I keep encountering the following errors: -----> Installing dependencies Installing node modules npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ...

Utilizing JSON API filtering within a Next.js application

Recently delving into the world of coding, I've embarked on a personal project that has presented me with a bit of a challenge regarding API filtering. My goal is to render data only if it contains a specific word, like "known_for_department==Directin ...

Implementing a Fixed Navbar in VueJS on Scroll

I am seeking help with creating a Fixed Navbar on Scrolling using Vue.js. I initially wrote some jQuery code for this functionality, but now I want to transition it to Vue.js. The updated code can be found in a file named navbar.js. Previous jQuery CODE ...

kineticjs equivalent to jquery sortable

Could someone recommend a kineticjs plugin or script that works with jquery's "sortable" function? I am trying to create a list of shapes where I can drag and drop them, and when one element moves, the other elements shift into place. ...

Building a multi-page application with ExtJs MVC

I'm new to MVC, especially when it comes to extJs. I want to implement the MVC approach in my project. I came across a tutorial at , which provided an example with only one page. In this example, they used app.js to load extjs views. My question is, w ...

Is it possible to create a single Vue component with different sections that can be routed to using buttons from another component?

As a newcomer to Vuejs, I am aiming to optimize my code by consolidating it into one Vue component and specifying routing just once. Currently, I have an info.vue in the apps directory and prises.vue & priseshigh.vue in another directory. My goal is to onl ...

Utilize AngularJS to monitor the amount of time users spend within the web application and automatically activate an event at designated intervals

Is there a way to monitor how long a user is active on the website and trigger an event once they reach 30 seconds of browsing time? ...

Is the Site Header displayed depending on the scroll position and direction of scrolling?

On my website, I have a header that I want to hide when the user scrolls down 100px and show again when they scroll up 50px. I attempted to write a script for this functionality, but it doesn't seem to be working as expected. CSS /* This CSS rule w ...

Initiate the countdown when the button is pushed

Recently ran into an issue where a button triggers a command to a Perl script, causing the page to continuously load for 60 seconds. To provide users with transparency on when the Perl script will be finished running, I implemented a JavaScript countdown t ...

Guide on integrating a PUT request in Vue 3

Trying to incorporate a PUT request into the REST API at https://crudcrud.com/. I have a user list and when an update button is clicked, a modal should appear allowing users to modify fields like name, email, and image URL. The challenge lies in determinin ...

Utilizing jQuery to Toggle Visibility of Table Rows on Button Click

I have a unique layout on my page where there are two tables positioned side by side. The table on the left consists of buttons with company names, and the table on the right should display employees associated with each specific company. Upon initially l ...

JavaScript event triggered when an element is displayed on the page using AJAX

Is it feasible in JavaScript to initiate a function when an element, like a div, becomes visible on the screen? I am working on an infinite grid that expands in both directions, and I want to fetch elements dynamically through AJAX as the user scrolls. A ...

"Concealing Querystrings in Node.js and AJAX: A Step-by-Step

I want to create a simple login form using the ajax Post method. However, I am having issues with the querystring still appearing in the URL. Can anyone help me resolve this issue? Thank you for any assistance! [ https://i.stack.imgur.com/R76O4.png http ...

Having trouble retrieving the attribute of an appended element in jQuery?

I am facing an issue where I am unable to retrieve the ID-attribute of an element that has been appended into my HTML. Each time I try, the result is always 'undefined'. How can I resolve this problem? jQuery('form#formular').append(&a ...

The functionality of the code in a stack snippet may differ from that in a standalone HTML file

My code works perfectly on a stack snippet, but when I insert it into my server or an .html file, the refresh button shrinks! I have copied and pasted the code exactly as it is. Are there any specific snippet features that need to be added for it to work, ...

Create several designated perspectives from a template

I'm currently working with ui-router and have set up a parent state that includes several child states as shown below: .state('portfolio.patent', { url: '/:patentId', controller: 'patentItemCtrl', controllerA ...

Utilize styled-components in next.js to import and resize .svg files seamlessly

I have been attempting to import .svg files into my next.js project, but I have not had any success. I tried importing the .svg files the same way as in my React project by creating a typing.d.ts file and importing the svg as a component. However, it did ...

When refreshing, the useEffect async function will not execute

Upon page load, the getImages function is intended to run only once. After refreshing the page, both tempQuestionImages and questionImages are empty. However, everything works perfectly after a hot reload. I am utilizing nextJs along with Firebase Cloud ...

Issue in Angular: Attempting to access properties of undefined (specifically 'CustomHeaderComponent')

I have encountered a persistent error message while working on a new component for my project. Despite double-checking the injection code and ensuring that the module and component export logic are correct, I am unable to pinpoint the issue. custom-header ...

Quick inquiry about referencing state variables in the render method in React Native

Initially, I assumed it was just a simple syntax error, but now I'm beginning to think that it might be related to a bigger concept concerning hierarchy and inheritance. I am currently working on an app in react native (expo) where I aim to display a ...