bugfix> javascript > 投稿

ウェブサイトからJSONデータを取得しようとしていますhttps://api.cryptonator.com/api/ticker/btc-usd

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の価格に基づいて更新されます。

助けていただければ幸いです、ありがとう!

回答 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);
    
    

あなたの答え