我如何在 vue 中使用 axios 從 json 數據 (api) 中獲取特定值

Question

我的json數據

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

我的 axios 腳本

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

var dataValue = []

export default {
  name: 'DashboardInfo',
  data () {
    return {
      infoTiles: [{
        color: 'success',
        value: dataValue,
        text: 'Total Transaction',
        icon: '',
      }, {
        color: 'danger',
        value: dataValue,
        text: 'Deposit',
        icon: '',
      }, {
        color: 'info',
        value: dataValue,
        text: 'Withdrawal',
        icon: '',
      }],
    }
  },
  created(){
    axios
    .get('/dashboard')
    .then(response => (response.data))
    .then(result => {
      dataValue.push(result)
      document.getElementByName('total_transaction')
    })
  }
}
</script>

預期結果：

value : 7
text : total transaction

value : 4
text : total deposit

and so on...

現在我的實際輸出是帶有狀態、值等的 json 原始數據。我應該編碼什么，所以我只得到數字 7，而不是所有數據。

我知道我在做什么是錯誤的，因為我真的是這方面的初學者，而且這是我使用 axios-vue 制作的第一個應用程序。

Answer 1

正如我所假設的，你的 json 數據總是這樣的。

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

您必須修改有關 axios 響應的代碼。 該代碼可能會解決您的問題。

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);
    })
  }
}

Answer 2

好吧，我有點找到了解決這個問題的方法。 這就是我所做的

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

我得到的輸出

[7]
total transaction

我只需要將每個響應推送到專用於每個對象的單個 var。

我知道這不是最有效的方法，但它有效