如何使用 Javascript 从 API 获取 JSON 数据？ [关闭]答案

【问题标题】：How to get JSON data from API using Javascript? [closed]如何使用 Javascript 从 API 获取 JSON 数据？ [关闭]
【发布时间】：2020-11-26 22:24:52
【问题描述】：

我正在尝试从https://api.cryptonator.com/api/ticker/btc-usd 网站获取 JSON 数据

我将如何使用 Javascript 来提取 JSON 数据？具体来说，我希望输出价格字段。

作为一个小背景，我正在制作一个实时跟踪价格的小型 Crypto 项目，所以我会像这样将它与 HTML 一起使用：

    <h1> Bitcoin (BTC) </h1>

    <p> Price in USD: $<span id="price"></span>

    </p>
    <script>
      const api_url = 'https://api.cryptonator.com/api/ticker/btc-usd';

      async function getBTCPrice() {
        const response = await fetch(api_url);
        const data = await response.json();

        console.log(data.ticker.price);

        const price = data.ticker.price;

        document.getElementById('price').textContext = price;
      }

      getBTCPrice();
    </script>

美元价格（实时）：$ 将根据 API 中的价格更新。

任何帮助将不胜感激，谢谢！

【问题讨论】：

给定的代码有什么不工作的地方吗？此外，为什么这个问题用 CSS 或 CryptoAPI 标记为基于 C 的程序？

标签： javascript html css json cryptoapi

【解决方案1】：

您可以使用 Fetch API 在 javascript 中获取 API 数据，它包含一个方便的函数来解析 JSON 下载。

获取比特币价格的示例

async function fetchPrice() {
  const res = await fetch('https://api.cryptonator.com/api/ticker/btc-usd');
  const data = await res.json();
  return data.ticker.price
}

这可以用来设置一个DOM节点的innerText

fetchPrice().then(price => {
  document.querySelector('#price').innerText = price;
}, console.error);

【讨论】：