Get data from axios response (Vuejs)

Question

so im using axios to get an api from a url

here is my code:

<html>
<head>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="{{asset("/core/vue.js")}}" type="text/javascript"></script>
</head>
<body>
<div id="app">
    @{{ info }}
    <button v-on:click.prevent="GetId($event)" value="1">click me!</button>
</div>

<style>
</style>
<script type="text/javascript" language="JavaScript">
    new Vue({
        el: '#app',
        data: {
                info: null,
                value: null
        },
        methods:{
            GetId:function (event) {
                element = event.currentTarget;
                value = element.getAttribute('value');
                axios
                    .get('/api/GetProduct/'+value)
                    .then(response => (this.info = response))
                    .then(this.value = value)
                    .catch(error => console.log(error))
                }
            },
    })
</script>
</body>
</html>

but the problem is im getting an long array that i just need data from it.

i tried using response.$data but didn't work here is the response that i get:

{ "data": { "pr-id": 1, "pr-name": "asdda", "pr-amount": 12000, "pr-discount-amount": null, "pr-stock": null }, "status": 200, "statusText": "OK", "headers": { "cache-control": "no-cache, private", "connection": "close", "content-type": "application/json", "date": "Wed, 27 Nov 2019 11:39:12 +0000, Wed, 27 Nov 2019 11:39:12 GMT", "host": "127.0.0.1:8000", "phpdebugbar-id": "Xf9f5355a2b74176afad6c70670477d50", "x-powered-by": "PHP/7.2.17", "x-ratelimit-limit": "60", "x-ratelimit-remaining": "57" }, "config": { "url": "/api/GetProduct/1", "method": "get", "headers": { "Accept": "application/json, text/plain, */*", "X-XSRF-TOKEN": "eyJpdiI6Im92YUluNVwvQkRFeTFFa04wc3lkNXpnPT0iLCJ2YWx1ZSI6ImdJZ1lEZFB5cmlwdzFudGxTYU1ZYXJzXC9rbm4xNUZlSnJcL2ZmenhpOVArbEl0KytFMXo5Z3AxUVBKajdGNkdtQyIsIm1hYyI6IjEzNWVmYjExMTc1NTQwYjY4MjVlOTNlNjllOGEwNTcxMTE2NjY2NTY5OTFiYjFkNmU2ZDhlYmM5OTU1Y2NiNWUifQ==" }, "transformRequest": [ null ], "transformResponse": [ null ], "timeout": 0, "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN", "maxContentLength": -1 }, "request": {} }

and i just need this part:

"data": { "pr-id": 1, "pr-name": "asdda", "pr-amount": 12000, "pr-discount-amount": null, "pr-stock": null }

It isn't the cause of your current problem but .then(this.value = value) will not be doing what you think it's doing. There's no function wrapper so that code will be running immediately, not when the promise resolves. You're also creating global variables called element and value because you've not included var, let or const. — skirtle
– skirtle, Commented Nov 27, 2019 at 11:56

ege · Accepted Answer · 2019-11-27 12:06:22Z

The response from axios is a JS object, so you can use normal JS functionality, ie.

axios.get(url)
  .then(response => {
    this.info = response.data
  })
  .catch(error => console.log(error))

See the docs here: https://github.com/axios/axios#response-schema.

From the docs:

The response for a request contains the following information.

{
  // `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 in the browser
  request: {}
}

Collectives™ on Stack Overflow

Get data from axios response (Vuejs)

1 Answer 1

From the docs:

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

From the docs:

Comments

Related