从 Axios 响应对象中提取键和值的最佳方法是什么？答案

【问题标题】：What is the best way extract a key and value from Axios response object?从 Axios 响应对象中提取键和值的最佳方法是什么？
【发布时间】：2020-05-04 11:59:36
【问题描述】：

我有一个 Mongoose 模式，它在混合类型数组中记录一个键：值对，如下所示：

猫鼬

const budgetSchema = new Schema({
  earnings: Number,
  expenses: [mongoose.Schema.Types.Mixed]
});

bugdet:{
  earning:1000,
  expenses: [
{shopping: 300},{bills:700}
]
}

在 Vue.js 中，我使用 Axios 请求数据，它工作正常，但是当我显示费用属性时，它显示为 {shopping:300}。

Vue js

<template>
  <div class="about">
    <h1>My Budget</h1>
    {{ myExpenses }}
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: "myBudget",
  data() {
    return{
        myExpenses:[]
    }
  },
  methods: {},
  mounted(){
      axios.get("http://localhost:3000/budget",{
          headers:{"Content-Type": "application/json"},
          withCredentials: true
      }).then(res =>{
          this.myExpenses =  res.data.budget[0].expenses[0]
      })
  }
};
</script>

我想分别显示“费用”数据的键和值。有什么办法可以提取对象吗？

【问题讨论】：

标签： javascript express vue.js mongoose axios

【解决方案1】：

你可以使用解构：

const {
  data: {
    budget: [firstElement]
  }
} = res;

并使用firstElement 变量，该变量将等于res.data.budget[0]；

【讨论】：

【解决方案2】：

看来您的 axios 处理得很好，根据我对您问题的解释，您确实在尝试访问 axios 返回给您的数据。以下示例不使用 axios，但假设 data 方法中的静态数据与您已经从 axios 中检索到的数据相同。但是，我确实注意到您的数据的一件事是您只获取了expenses 的第一个索引。您可能想要执行this.myExpenses = res.data.budget[0].expenses 之类的操作，这将返回整个费用列表，而不仅仅是第一个值。

这就是我相信你正在尝试做的事情：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <h1>My Budget</h1>
      <div v-for="expense in myExpenses">
        <div>Name:{{ Object.keys(expense)[0] }}</div>
        <div>Total:{{ Object.values(expense)[0] }}</div>
        <hr />
      </div>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        myExpenses: [{ shopping: 300 }, { bills: 700 }]
      }
    });
  </script>
</html>

但是，我建议更改架构以返回如下所示的对象

{ name: 'shopping', total: 300 }

此模式更有效地使用对象的结构来指定其字段的名称及其关联值。它还可以让你做更多这样的事情：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <h1>My Budget</h1>
      <div v-for="expense in myExpenses">
        <div>Name:{{ expense.name }}</div>
        <div>Total:{{ expense.total }}</div>
        <hr />
      </div>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        myExpenses: [
          { name: 'shopping', total: 300 },
          { name: 'bills', total: 700 }
        ]
      }
    });
  </script>
</html>

【讨论】：

是的，我想我必须改变我的架构。我使用混合类型来存储我的键值对。谢谢。顺便说一句，我看到你对 Vue 很有经验。如果我还有其他问题，可以标记你吗？
当然，我不能保证我会得到所有的东西，但我很高兴在 SO 上更频繁地为 Vue 社区做出贡献。