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

Prevent individual elements from shifting around on browser resizing within a React form

Having issues with a React form that includes an image gallery and input fields. import React, { Component } from 'react'; import ImageGallery from 'react-image-gallery'; import { Container, Row, Col, InputGroup, Button, FormControl, ...

Is this the correct method for linking the function to every individual element?

Is it correct to attach the function to each element individually? Also, is my function correctly implemented? <ul id='forShopping'> <li><input class='ch' type='checkbox' onclick='isAct ...

Validation with Javascript can trigger the display of a hidden element

Hello there, I could really use some assistance with the JavaScript part of this code. I have two JavaScript functions: one for validating if a radio checkbox is selected, and another for revealing the "answer". Currently, an alert pops up if no selections ...

What is the method for assigning a value to a JSON object using data from another JSON object?

I am faced with the task of setting the seqNo property in one JSON object, b, based on the id from another JSON object, a. How can I achieve this? var a = [{id: "Make", seqNo: 4}, {id: "Model", seqNo: 1}, {id: "XModel", seqNo: 2 ...

The ASP.NET MVC controller did not receive the JSON object properly due to some missing properties

I am facing an issue when trying to pass a JSON object to my ASP.NET MVC controller. The JSON is set in JavaScript in this way: jsonChildren = '{ "childImproItems" : [{ "Theme":"tralalali" }, { "Theme":"tralalali" }]}'; ... $.ajax({ ...

Executing functions in real-time using React Native

I'm fairly new to Object-Oriented Programming (OOP) and my understanding of promises, asynchronous/synchronous function execution is quite basic. Any guidance or help from your end would be greatly appreciated! Let's take a look at an example fr ...

Can the title of a page be modified without using HTML?

Is it possible to update the title of my website directly from the app.js file? (I am utilizing node.js and express.js) ...

Updating IP addresses in MongoDB

I am dealing with a nested schema in my mongoDB collection. Here's an example of how it looks: { "_id":"61d99bf5544f4822bd963bda0a9c213b", "execution": { "test_split":0, "artifacts&quo ...

Navigating Redirect Uri in Ionic for third-party API integration

After creating a webapp, I decided to venture into developing a mobile app using Ionic. The idea of making a progressive web app crossed my mind, but unfortunately Apple doesn't support it yet. (By the way, I'm still quite new to all of this) F ...

Guide on replacing placeholders in a text with input fields and connecting them with v-model in Vue.js

I am currently working on creating an exam page that features fill in the gap type questions. These questions have placeholders where students need to insert the correct words or phrases. The questions are fetched via an ajax request and consist of simple ...

Is it possible to set the duration of transitions in Vue.js to

Currently, I am working with the official Vuejs router and aiming to implement unique animations for different routes. I found an example here: https://router.vuejs.org/en/advanced/transitions.html (look under 'Route-Based Dynamic Transition') H ...

Transforming the jQuery tooltip to be shown in a column layout

Hello, I am currently using the displayTag library to showcase some tables. My goal is to include a tooltip on each display:column element by utilizing jQuery. Below is the code snippet in question: <c:set var="titleName"><wp:i18n key="FILENAME" ...

Secure your API access with ADFS integration in Angular.js

I am currently working on creating a new feature-rich application and I'm encountering some challenges with designing the authentication process. I have two main requirements: An API must be accessible ADFS must be used for authentication Initiall ...

Is it possible to dynamically group by one column in a dataset without requiring a trigger function?

I've been working on a script that retrieves values from another page and organizes them into a table alphabetically by Name, City, and District. The current script is functioning well, but I now want to enhance it by grouping the values by city as we ...

Tips for dynamically hiding/showing a button depending on the focus of two different HTML inputs

I'm working on a login section and looking to add a unique feature: When a user selects the email or password input field, I want the button text to change to 'LOGIN'. If neither input field is selected, the text should display 'NOT A ...

The art of replacing material-ui styles with styled components

As a newcomer to UI material design, I am eager to create my own customized Button Component using styled-components. I am facing a challenge in overriding the CSS based on different button variations such as "primary" or "secondary". You can find my cod ...

Tips for preventing multiple requests in your JavaScript search autocomplete feature

I'm currently using the Turbolinks.visit action with the help of $(document).on("input");... HTML <form id="mainSearch" method="get" autocomplete="off"> <input type="search" name="s" placeholder="Search" /> </form> Javascript ...

How to incorporate global environmental variables into all SASS files in Nuxt.js

Is there a way to incorporate an environment variable into all my sass/scss files? This is what I have attempted in the nuxt.config.js file: export default { ... loaders: { scss: { data: '$myenv: ' + process.env.MY_ENV + ';&a ...

There was an error in the syntax: a semicolon is missing before the statement

During an ajax request, I encountered this error and upon reviewing it thoroughly, I am unable to pinpoint the cause. The following code snippet is where the issue seems to lie: $('#post_submit').click(function() { var poster_id = <?php echo ...

use javascript or jquery to conceal the textbox control

Looking to conceal a textbox control using javascript or jquery. I attempted the following code: document.getElementsByName('Custom_Field_Custom1').style.display="none"; Unfortunately, I received an error in the java console: document.getEle ...