在多个对象情况下无法从 json 文件中获取数据答案

【问题标题】：Unable to fetch data from json file in multiple object case在多个对象情况下无法从 json 文件中获取数据
【发布时间】：2020-11-28 14:21:55
【问题描述】：

<!DOCTYPE html>
<html lang="en">
   <body>
    <h1>show me btc current rate</h1>
    <p>
      current btc rate: <span id="btc_rate"></span><br />   
    </p>
    <script>
      const api_url = 'https://api.coindesk.com/v1/bpi/currentprice/BTC.json';
  async function getBTC()
  {
        const response = await fetch(api_url);
        const data = await response.json();
        const {rate} = data;
        document.getElementById('btc_rate').textContent = rate;     
 }
getBTC();
</script>
</body>
</html>

我试图从 https://api.coindesk.com/v1/bpi/currentprice/BTC.json 但不知何故不工作。

这是 json 文件：

{
"time": {
"updated": "Aug 8, 2020 13:10:00 UTC",
"updatedISO": "2020-08-08T13:10:00+00:00",
"updateduk": "Aug 8, 2020 at 14:10 BST"
},
"disclaimer": "This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org",
"bpi": {
"USD": {
"code": "USD",
"rate": "11,761.4920",
"description": "United States Dollar",
"rate_float": 11761.492
},
"BTC": {
"code": "BTC",
"rate": "1.0000",
"description": "Bitcoin",
"rate_float": 1
}
}
}

我想从上面的 json 文件中提取“rate”：“11,761.4920”。

【问题讨论】：

标签： html api rest

【解决方案1】：

问题出在这一行：

const {rate} = data;

您正在尝试使用 destructuring assignment 提取 rate 属性，但该属性嵌套在两个对象中：

$ curl -s 'https://api.coindesk.com/v1/bpi/currentprice/BTC.json' | jq '.'
{
  "time": {
    "updated": "Aug 8, 2020 13:09:00 UTC",
    "updatedISO": "2020-08-08T13:09:00+00:00",
    "updateduk": "Aug 8, 2020 at 14:09 BST"
  },
  "disclaimer": "This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org",
  "bpi": {
    "USD": {
      "code": "USD",
      "rate": "11,769.7729",          <------ here it is
      "description": "United States Dollar",
      "rate_float": 11769.7729
    },
    "BTC": {
      "code": "BTC",
      "rate": "1.0000",
      "description": "Bitcoin",
      "rate_float": 1
    }
  }
}
$

正确的语法是：

const { bpi: { USD: { rate } } } = data;

这里正在重写代码：

<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <body>
  <h1>show me btc current rate</h1>
  <p>current btc rate: <span id="btc_rate"></span>°</p>
  <script>
    const api_url = 'https://api.coindesk.com/v1/bpi/currentprice/BTC.json';
    async function getBTC()
    {
      const response = await fetch(api_url);
      const data = await response.json();
      const { bpi: { USD: { rate } } } = data;
      document.getElementById('btc_rate').textContent = rate;
    }
    getBTC();
  </script>
  </body>
</html>

【讨论】：