坚持使用 Javascript 中的 JSON API 调用

如何解决坚持使用 Javascript 中的 JSON API 调用

我正在尝试构建一个计算器，您可以在其中选择不同的加密货币并构建用于测试和跟踪的投资组合。我为此选择 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 如果您知道如何完成此操作，请告诉我！

解决方法

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