[Vuejs]-How do i get specific value from a json data (api) using axios in vue

by

0👍

As I assumed, your json data is always like this.

[ { "status": 200, "values": [ { "total_transaction": 7, "total_deposit": 4, "total_withdrawal": 3, "total_request": 4, "accepted_request": 1, "pending_request": 0 } ] } ]

you have to modify your code on axios response. The code may solve your problem.

import axios from 'axios';
import dashboardData from '@/services/dashboard.service'

var dataValue = []

export default {
  name: 'DashboardInfo',
  data () {
    return {
      infoTiles: [{
        color: 'success',
        value: 0,
        text: 'Total Transaction',
        icon: '',
      }, {
        color: 'danger',
        value: 0,
        text: 'Total Deposit',
        icon: '',
      }, {
        color: 'info',
        value: 0,
        text: 'Total Withdrawal',
        icon: '',
      }, {
        color: 'info',
        value: 0,
        text: 'Total Request',
        icon: '',
      }, {
        color: 'info',
        value: 0,
        text: 'Accepted Request',
        icon: '',
      }, {
        color: 'info',
        value: 0,
        text: 'Pending Request',
        icon: '',
      }],
    }
  },
  created(){
    var that = this;
    axios
    .get('/dashboard')
    .then(response => (response.data))
    .then(result => {
      var values = result.data.values;
      var infoTiles = that.infoTiles;
      infoTiles[0].value = values['total_transaction'] ? values['total_transaction'] : 0;
      infoTiles[1].value = values['total_deposit'] ? values['total_deposit'] : 0;
      infoTiles[2].value = values['total_withdrawal'] ? values['total_withdrawal'] : 0;
      infoTiles[3].value = values['total_request'] ? values['total_request'] : 0;
      infoTiles[4].value = values['accepted_request'] ? values['accepted_request'] : 0;
      infoTiles[5].value = values['pending_request'] ? values['pending_request'] : 0;
      that.$set(that, 'infoTiles', infoTiles);
    })
  }
}

0👍

Alright i kinda found a way around this.
this is what i did

mounted(){
    axios
    .get('/dashboard')
    .then(response => (response.data.values[0].total_transaction))
    .then(result => {
      dataValue.push(result)
    })

output i get

[7]
total transaction

i just have to push every response to a single var dedicated for each object.

i know its not the most effective way to do it, but it works

Leave a comment