Javascript 从Axios响应对象提取密钥和值的最佳方法是什么？

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

猫鼬

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

在Vue.js中，我使用Axios请求数据，它工作正常，但当我显示expenses属性时，它显示为{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>

我的预算
{{myExpenses}}
从“axios”导入axios
导出默认值{
名称：“我的预算”，
数据（）{
返回{
我的费用：[]
}
},
方法：{}，
安装的（）{
axios.get（“http://localhost:3000/budget",{
标题：{“内容类型”：“应用程序/json”}，
证书：正确
})。然后（res=>{
this.myExpenses=res.data.budget[0]。费用[0]
})
}
};

---

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

您可以使用分解：

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

---

并使用

firstElement

变量，该变量将等于

res.data.budget[0]

您可以使用分解：

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

---

并使用

firstElement

变量，该变量将等于

res.data.budget[0]

看起来您对axios处理得相当好，根据我对您问题的解释，您确实在尝试访问axios返回给您的数据。以下示例不使用axios，但假设data方法中的静态数据与您已经从axios检索到的数据相同。不过，我确实注意到了一点，那就是您只获取了

费用的第一个索引。您可能需要执行类似于
this.myExpenses=res.data.budget[0].expenses的操作，这将返回整个费用列表，而不仅仅是第一个值

这就是我相信你正试图做的：


文件
我的预算
名称：{{Object.keys（费用）[0]}
总计：{{Object.values（expense）[0]}

var app=新的Vue({
el:“#应用程序”，
数据：{
我的费用：[{购物：300}，{账单：700}]
}
});

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

{name:'shopping'，总计：300}

此模式更有效地使用对象的结构来指定其字段的名称及其关联值。它还允许您执行以下操作：


文件
我的预算
名称：{{expense.Name}
总计：{{expense.Total}

var app=新的Vue({
el:“#应用程序”，
数据：{
我的费用：[
{姓名：'购物'，总数：300}，
{姓名：'账单'，总数：700}
]
}
});
看起来您对axios处理得很好，根据我对您问题的解释，您确实在尝试访问axios返回给您的数据。以下示例不使用axios，但假设data方法中的静态数据与您已经从axios检索到的数据相同。不过，我确实注意到了一点，那就是您只获取了
费用的第一个索引。您可能需要执行类似于
this.myExpenses=res.data.budget[0].expenses的操作，这将返回整个费用列表，而不仅仅是第一个值

这就是我相信你正试图做的：


文件
我的预算
名称：{{Object.keys（费用）[0]}
总计：{{Object.values（expense）[0]}

var app=新的Vue({
el:“#应用程序”，
数据：{
我的费用：[{购物：300}，{账单：700}]
}
});

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

{name:'shopping'，总计：300}

此模式更有效地使用对象的结构来指定其字段的名称及其关联值。它还允许您执行以下操作：


文件
我的预算
名称：{{expense.Name}
总计：{{expense.Total}

var app=新的Vue({
el:“#应用程序”，
数据：{
我的费用：[
{姓名：'购物'，总数：300}，
{姓名：'账单'，总数：700}
]
}
});
是的，我想我必须改变我的模式。我使用混合类型来存储我的键值对。谢谢顺便说一句，我看你对Vue很有经验。如果我有任何其他问题，我可以给你贴标签吗？当然，我不能保证我能做到每件事，但我很高兴能更多地为Vue社区做出贡献。是的，我想我必须改变我的模式。我使用混合类型来存储我的键值对。谢谢顺便说一句，我看你对Vue很有经验。如果我有任何其他问题，我可以给你贴上标签吗？当然，我不能保证我能做到每件事，但我很高兴能更多地为Vue社区做出贡献。