如何将比特币的价格从API发布到HTML？

Question

我想创建一个应用，其中有一个功能可以显示当前的比特币价格，这是从https://apiv2.bitcoinaverage.com/indices/global/ticker/BTCUSD的API请求的。我想在h2元素中显示它。你知道我该怎么做吗？ TIA

const express = require("express");
  const bodyParser = require("body-parser");
  const request = require("request");

  const app = express();

  app.use(bodyParser.urlencoded({extended: true}));

  request("https://apiv2.bitcoinaverage.com/indices/global/ticker/BTCUSD/", function(error, response, body) {

});

  res.send("");

  app.listen(3000, function() {
  console.log("Server is running on port 3000");
});

<h2></h2>

<form class="" action="/" method="post">
      <select class="" name="crypto">
        <option value="BTC">Bitcoin</option>
        <option value="ETH">Etherium</option>
        <option value="LTC">Litecoins</option>
      </select>
      <select class="" name="fiat">
        <option value="USD">US Dollar</option>
        <option value="GPB">GB Pound</option>
        <option value="EUR">EU Euros</option>
      </select>
      <button type="submit" name="button">check</button>  
</form>

Answer 1

现在工作正常，谢谢。

const express = require("express");
const bodyParser = require("body-parser");
const request = require("request");

const app = express();

app.use(bodyParser.urlencoded({extended: true}));

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html")
});

app.post("/", function(req, res) {
  var crypto = req.body.crypto;
  var fiat = req.body.fiat;
  var baseURL = "https://apiv2.bitcoinaverage.com/indices/global/ticker/";
  var finalURL =  baseURL + crypto + fiat;


  request(finalURL, function(error, response, body) {
    var data = JSON.parse(body);
    var price = data.last;


    res.send("<h2>The price of " + crypto + " is " + price + " " +fiat + " </h2>");

  });
});

app.listen(3000, function() {
  console.log("Server is running on port 3000");
});

我能够通过观察您的答案来提出解决方案。功劳归功于你们。竖起大拇指！

Answer 2

您不需要为此表达，您可以通过一个简单的html页面来实现。该代码对您有效：

<h2 id="price"></h2>
<select id="crypto">
  <option value="BTC">Bitcoin</option>
  <option value="ETH">Ethereum</option>
  <option value="LTC">Litecoin</option>
</select>
<select id="fiat">
  <option value="USD">US Dollar</option>
  <option value="GBP">GB Pound</option>
  <option value="EUR">EU Euro</option>
</select>
<script>
  function updatePrice() {
    const url = 'https://apiv2.bitcoinaverage.com/indices/global/ticker/'
              + document.getElementById('crypto').value
              + document.getElementById('fiat').value;
    fetch(url)
      .then(function(response) {
        return response.json();
      })
      .then(function(json) {
        document.getElementById('price').textContent = json.last;
      })
  }
  document.addEventListener("DOMContentLoaded", () => {
    document.getElementById('crypto').onchange = () => updatePrice();
    document.getElementById('fiat').onchange = () => updatePrice();
  });
</script>

请注意，我将GPB的值更改为GBP并在选择项上进行了其他较小的修订。

Answer 3

这可以通过获取本机api轻松解析，简单的例子：

fetch("https://apiv2.bitcoinaverage.com/indices/global/ticker/BTCUSD").then(v => v.json()).then((function(v){
    console.log(v)
  })
)

Answer 4

这是使用fetch的简单示例

const url = 'https://apiv2.bitcoinaverage.com/indices/global/ticker/'

function getOption(e) {
  return e.options[e.selectedIndex].value;
}

function get(n) {
  return document.getElementById(n);
}

const cryptoEl = get('crypto');
const fiatEl = get('fiat');
const buttonEl = get('button');
const priceEl = get('price');


buttonEl.onclick = async(e) => {
  const crypto = getOption(cryptoEl);
  const fiat = getOption(fiatEl);
  console.log(crypto + fiat);

  const res = await fetch(url + crypto + fiat);
  const data = await res.json();
  console.log(data);
  priceEl.innerHTML = data.ask;
}

<h2 id="price"></h2>

<select id="crypto" class="" name="crypto">
  <option value="BTC">Bitcoin</option>
  <option value="ETH">Etherium</option>
  <option value="LTC">Litecoins</option>
</select>
<select id="fiat" class="" name="fiat">
  <option value="USD">US Dollar</option>
  <option value="GPB">GB Pound</option>
  <option value="EUR">EU Euros</option>
</select>
<button id="button">check</button>