0

我正在尝试构建一个计算器，您可以在其中选择不同的加密货币并构建一个用于测试和跟踪的投资组合。为此，我选择 Coingecko API v3 并使用 Fetch 进行 API 调用。https://www.coingecko.com/en/api

API 调用正常工作，我从服务器获取 JSON 数据。我构建了一个传递前 100 名硬币的函数，将它们放入 Datalist-Tag 中以从输入中进行选择：

function fetch_coinlist(url) {
  fetch(url)
    .then(function(response) {
      if (response.status !== 200) {
        alert("Can Not get Price Api! Status: " + response.status);
        return;
      }

      response.json().then(function(data) {
        document.getElementById("coinlist").innerHTML = "";

        for (i = 0; i <= 99; i++) {
          const toplist = document.createElement("option");

          toplist.id = data[i].symbol;

          toplist.innerHTML =
            data[i].symbol.toUpperCase() + " - " + data[i].name;

          document.getElementById("coinlisting").appendChild(toplist);

          //console.log(data[i].id);
          //console.log(data[i].name);
          //console.log(data[i].symbol);
          //console.log(data[i].image);
          //console.log(data[i].current_price);
        }
      });
    })
    .catch(function(err) {
      alert("Can Not get Price Api! Status: " + err);
    });
}
<input list="coinlisting" id="coinlist" name="coinlist" class="curser-choose" />
<datalist id="coinlisting" placeholder="Choose Coin"></datalist>

这是有效的，我正在使用 For 循环来处理响应。如果用户从该数据列表中选择了一个选项，我会尝试显示硬币的价格，并且对于更多功能，我认为最好我可以调用一个对象，data.coinname.current_price这样我就可以构建一个函数，我可以在其中传递一个字符串给它和得到那枚硬币的价格。

但是，现在我必须将 data[0].current_price 用于current Price列表中的第一项。被调用列表上的项目会随着时间而改变，所以我不能进行静态分配，我想我每次调用 API 时都可以这样做，但是拥有一个可以用名称提供的函数对我的目标没有好处作为执行价格调用的字符串。

可以在与列表相同的调用中获得价格，但我无法弄清楚我将如何做到这一点。在 API 的网站上列出了不同的调用，第一个是 /coins/list 调用，它说“使用它来获取所有硬币的 id 以进行 API 调用”并为每个可用的 JSON 对象硬币如：

{
  "id": "1inch",
  "symbol": "1inch",
  "name": "1inch"
}

我是否需要先打这个电话才能实现我的想法？但我不确定这将如何帮助我获得我正在寻找的解决方案......我正在努力寻找解决方案并感到困惑，我觉得我没有正确理解它，它应该不那么难正如我现在认为的那样：D 如果您知道如何完成此操作，请告诉我！

4

1 回答 1

0

你可以做这样的事情。我保持html简单。

  • fetch_coinlist：获取硬币列表。获取硬币列表后，它将结果转换为对象而不是列表。每个硬币都可以使用 访问coins["<coin id>"]。
  • show_coinlist 进行可视化
  • addEventListener 在您选择项目时捕获。

const gecko = "https://api.coingecko.com/api/v3/";
var coins = {};

// selector actions
const selector = document.querySelector('#coinlisting');
const info = document.querySelector('#info');
selector.addEventListener('change', event => {
  info.innerHTML = "Selected item: " + selector.value + " : " + coins[selector.value].name;
});

function fetch_coinlist() {
  fetch(gecko + "coins/list")
    .then(function(response) {
      if (response.status !== 200) {
        alert("Can Not get List Api! Status: " + response.status);
        return;
      }

      response.json().then(function(data) {
        coins = {};
        for (let i = 0, l = data.length; i < l; i++) {
          let {id, ...info} = data[i];
          coins[id] = info;
        }
        show_coinlist();
      });
    })
    .catch(function(err) {
      alert("Can Not get Price Api! Status: " + err);
    });
}
function show_coinlist(){
  for (let id in coins) {
    let item = coins[id];
    const toplist = document.createElement("option");
  
    toplist.value = id;
    toplist.innerHTML = item.symbol.toUpperCase() + " - " + item.name;
    document.getElementById("coinlisting").appendChild(toplist);
  }
}

fetch_coinlist();
    <select id="coinlisting" placeholder="Choose Coin"></select>
    <div id="info"></div>

于 2021-03-27T16:18:22.723 回答