如何在 vue 中使用 axios 从 json 数据（api）中获取特定值答案

【问题标题】：How do i get specific value from a json data (api) using axios in vue如何在 vue 中使用 axios 从 json 数据（api）中获取特定值
【发布时间】：2020-05-15 15:18:00
【问题描述】：

我的 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 制作的第一个应用程序。

【问题讨论】：

这就是为什么你应该在使用像 vue 这样的框架之前学习纯 JavaScript。
好的，但这不是我要问的
你想在哪里存储这个预期结果？
你应该做 response.data.values 而不是 response.data 现在当你将结果推送到 dataValue 时，你正在推送整个 json 对象
您是否在使用其他人的代码，并且您想修改此代码。正确的？（您的回答将有助于回答您的问题。）

标签： json rest vue.js axios

【解决方案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);
    })
  }
}

【讨论】：

that.$set(that.) 是什么？我想你错过了什么

【解决方案2】：

好吧，我找到了解决这个问题的方法。这就是我所做的

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

我得到的输出

[7]
total transaction

我只需要将每个响应推送到每个对象专用的单个 var。

我知道这不是最有效的方法，但它确实有效

【讨论】：