CODEWITHSUNDEEP
laravelvue.jsaxios
yosober
yosober

Reputation: 355

Get data from axios response (Vuejs)

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 }

Upvotes: 3

Views: 7830

Answers (1)

ege
ege

Reputation: 774

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: {}
}

Upvotes: 5

Related Questions