如何使用 Javascript 从 API 获取 JSON 数据？

Question

我正在尝试从网站 https://api.cryptonator.com/api/ticker/btc-usd

获取 JSON 数据

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

我正在制作一个实时跟踪价格的小型加密项目，因此我会像这样将它与 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 中的价格更新。

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

Answer 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);

如何使用 Javascript 从 API 获取 JSON 数据？

How to get JSON data from API using Javascript?

html

javascript

css

json

cryptoapi