卡在 JSON API 调用 Javascript

Question

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

API 调用正常，我从服务器获得了 JSON 数据。我构建了一个提供前 100 个硬币的函数，将它们放入数据列表标签中以从输入中进行选择：

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 这样的对象，这样我就可以构建一个我可以传递的函数一个字符串并获得该硬币的价格。

但是，现在我必须对列表中第一项的 current Price 使用 data[0].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 在您 select 一个项目时捕获。

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>

卡在 JSON API 调用 Javascript

Stuck with JSON API Call in Javascript

javascript

coingecko