卡在 Javascript 中的 JSON API 调用

Question

我正在尝试构建一个计算器，您可以在其中选择不同的加密货币并构建一个用于测试和跟踪的投资组合。为此，我选择 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 循环来处理响应。如果用户从该 Datalist 中选择了一个选项，我会尝试显示硬币的价格，为了获得更多功能，我认为最好调用像 data.coinname.current_price 这样的对象，这样我就可以构建一个可以传递字符串的函数到它那里并得到那个硬币的价格。

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

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

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

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

Answer 1

你可以做这样的事情。我保持 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>