Axios returns a string instead of JSON (vue.js)

Question

I don't understand why but axios is returning a string instead of JSON. Can someone explain me why?

<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>

I saw online that response.data is supposed to send back only the parsed json data but on my {{services}} I get this :

{ "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 :)

I expect it to be an object, without the "status", "message". And then make : {{service.title}} to get the title from every services (in a v-for) — Hippie
– Hippie, Commented Jun 9, 2020 at 20:09

Jakub A Suplicki · Accepted Answer · 2020-06-09 20:19:38Z

2

If the response is a string then you could use:

this.services = JSON.parse(response.data).data

else if it is a JSON object already (I think it might be - but get the actual data object from your response.data):

this.services = response.data.data

Then you could use v-for and get the title with {{service.title}}

Hope it helps.

answered Jun 9, 2020 at 20:19

Jakub A Suplicki

4,8211 gold badge27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hippie Over a year ago

Thank you so much, response.data.data is working :) <3 !

Jakub A Suplicki Over a year ago

Glad to hear. Good luck!

AlphaZero · Accepted Answer · 2022-06-08 02:46:33Z

1

This has to do with invalid JSON from the server side. You can use an online JSON validator like https://jsonlint.com/ to validate the JSON response.

answered Jun 8, 2022 at 2:46

AlphaZero

112 bronze badges

Comments

fathergorry · Accepted Answer · 2021-06-17 15:55:37Z

0

There might be an error in JSON. Axios return string when it fails to parse data into JSON. The common error in JSON is missing quotes in param names. Compare: JS: {x:"y"} JSON: {"x":"y"}

answered Jun 17, 2021 at 15:55

fathergorry

4284 silver badges13 bronze badges

Comments

Daniel · Accepted Answer · 2023-08-21 20:03:46Z

0

You can use interceptior to fix this bug

  const client = new Axios({});

  // Fix typeof data === 'string' in axios
  client.interceptors.response.use(
    function (response) {
      try {
        if (typeof response.data === 'string') {
          response.data = JSON.parse(response.data);
        }
      } catch {
        /* empty */
      }

      return response;
    },
    function (error) {
      return Promise.reject(error);
    },
  );

answered Aug 21, 2023 at 20:03

Daniel

8,7757 gold badges63 silver badges88 bronze badges

Collectives™ on Stack Overflow

Axios returns a string instead of JSON (vue.js)

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related