Vue Axios API 对象到对象数组

Question

我目前在我的网站上显示货币数据时遇到问题，我想在其中显示货币的简称和货币的价值。

我正在使用这个api，以美元为基础：https://api.exchangeratesapi.io/latest?base=USD

我运行并获取数据的代码是：

getCurrencies() {
  axios
    .get("https://api.exchangeratesapi.io/latest?base=USD")
    .then(response => {
      this.currencies = response.data.rates;
      console.log(this.currencies);
    });
}

我得到的输出当然只是货币的价值，我正在寻找一种方法将这些对象分解为我可以调用的对象数组： currency.short & currency.price

这样我将在网站上单独显示短名称和价格，而不是在使用“response.data.rates”时仅显示货币值

Answer 1

您可以使用Object.keys 方法来迭代汇率，并使用map 函数来创建您的对象，就像这样：

this.currencies = Object.keys(response.data.rates).map(k => ({
    short: k,
    price: response.data.rates[k]
}))