Vue js and Axios does not identify JSON response from API

Asked

Viewed 722 times

0

I have the following code to fetch data from an API via POST, I get the result from JSON (as I can write it to the console. However, I cannot recur the values to fill the Vue element array.


// Get Pipelines
const getPipelines = new Vue({
    el: '#top-pipelines',
    data: {
        pipelines: []
    },
    mounted() {
        axios({
            method: 'post',
            url: 'http:..xpto.../getpipelines',
            data: {
                orgId: "ORGIDXPTO",
                pipelineId: "19",
                dateFrom: "2017-11-01",
                dateTo: "2017-11-31"
            }
        })
        .then(function (response) {
               console.log(response);
               this.pipelines = response.json;
        })
    }
});

tried also "this.pipelines = Sponse.data;"

Important to say that my reply JSON does not have a header row before the object array (see below).


[
    {
        "id_pipeline": "NOME_PIPELINE_XPTO",
        "id_org": "ORGIDXPTO",
        "name": "Nome Pipeline",
        "active": "1"
    },
    {
        "id_pipeline": "NOME_PIPELINE_XPTO",
        "id_org": "ORGIDXPTO",
        "name": "Nome Pipeline",
        "active": "1"
    },
    {
        "id_pipeline": "NOME_PIPELINE_XPTO",
        "id_org": "ORGIDXPTO",
        "name": "Nome Pipeline",
        "active": "1"
    },
    {
        "id_pipeline": "NOME_PIPELINE_XPTO",
        "id_org": "ORGIDXPTO",
        "name": "Nome Pipeline",
        "active": "1"
    },
    {
        "id_pipeline": "NOME_PIPELINE_XPTO",
        "id_org": "ORGIDXPTO",
        "name": "Nome Pipeline",
        "active": "1"
    }
]

Any hint?

json vue.js axios response
  • 1

    Since your answer is an array you are trying to access response.json as json being a property of response it should return an error for trying to access a property named after an array. Since in Axios you do not define that the response to be received is a json you receive text and not JSON, so try to use this.pipelines = JSON.parse(response); to deserialize

  • Hi Huxley, you tested @Romulogabrielrodrigues' suggestion?

  • 1

    Thanks for the suggestion Romulus, I tried to use and also did not work. I was able to fix setting the headers headers: {
 'Content-Type': 'application/json',
 'Accept': 'application/json'
 } and I also recovered the Restsponse thus .then(response => {
 this.pipelines = response.data
 })Hug

  • What’s on the console if you do console.log(typeof response, response);?

1 answer

0

You must use it

sponse.date.

According to the Axios documentation, this is the response model:

{
  // `data` is the response that was provided by the server
  data: {},

  // `status` is the HTTP status code from the server response
  status: 200,

  // `statusText` is the HTTP status message from the server response
  statusText: 'OK',

  // `headers` the headers that the server responded with
  // All header names are lower cased
  headers: {},

  // `config` is the config that was provided to `axios` for the request
  config: {},

  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

Browser other questions tagged json vue.js axios response

You are not signed in. Login or sign up in order to post.