I am facing an issue with axios as it is returning a string instead of JSON format. I need some help to understand why this is happening.
<template>
<div class="app">
<Header/>
<h1>{{services}}</h1>
<Services v-bind:services="services"></Services>
</div>
</template>
<script>
import Header from "./components/Header.vue";
import Services from "@/components/Service";
import axios from 'axios';
export default {
name: 'App',
components: {
Services,
Header,
},
data() {
return {
services: [],
}
},
created() {
const instance = axios.create({
baseURL: 'http://localhost:3000/api',
timeout: 1000,
headers: {'Authorization': 'Bearer ' + 'mysecretcode'}
});
instance.get('/service')
.then(response => {
this.services = response.data;
console.log(response.data);
})
.catch(e => {
this.errors.push(e)
})
},
}
</script>
<style>
</style>
On searching online, I found out that response.data should return only the parsed json data, but in my case, {{services}} displays the following :
{ "status": 1, "message": "Operation success", "data": [ { "_id": "5edfdaf5586d4c75036bc853", "title": "Logo rapide", "description": "testing service desc", "createdAt": "2020-06-09T18:54:45.904Z" }, { "_id": "5edfdafd586d4c75036bc854", "title": "Logo rapide", "description": "testing service desc", "createdAt": "2020-06-09T18:54:53.054Z" }, { "_id": "5edfdc8bc07c7677915275c1", "title": "Logo rapide", "description": "testing service desc", "createdAt": "2020-06-09T19:01:31.945Z" }, { "_id": "5edfdc8cc07c7677915275c2", "title": "Logo rapide", "description": "testing service desc", "createdAt": "2020-06-09T19:01:32.621Z" } ] }
instead of the parsed data. Thank you :)