一个函数中来自 2 个 API 的 GET 请求（JQuery）答案

【问题标题】：GET request from 2 APIs in one function (JQuery)一个函数中来自 2 个 API 的 GET 请求（JQuery）
【发布时间】：2020-02-17 17:47:23
【问题描述】：

我正在尝试基于 CoinGecko API 构建一个页面。我被要求使用 JQuery 发出两个不同的 GET 请求，一个不带参数，一个带 id 参数，但我无法使用第二个 API 正确编写所有内容。

第一个 API 获取有关每个硬币的信息并显示它的符号和名称。数据显示在一个 div 中，每个 div 一个硬币。在每个 div 中都有一个更多信息按钮，其中显示了来自第二个 GET 请求的数据。我想在更多信息 div 中显示每个硬币的美元价值、欧元价值及其图像。

我很高兴获得有关第二个 API 的帮助，谢谢


$(()=>{
    $.get(`https://api.coingecko.com/api/v3/coins/list`, coins=>{
        for (let i=0; i<100; i++) {
            $(`#homeDiv`).append(`
                <div class="coinCard">
                    <h5><b>${coins[i].symbol}</b></h5>
                    <h6>${coins[i].name}</h6>
                    <button class="moreInfo">More Info</button>  
                </div>
            `)
        };

        // make "More Info" button work
        let infoButtons = $(`.moreInfo`);
        for (let infoButton in infoButtons) {
            $(infoButtons[infoButton]).click(function(e){

                $(()=>{
                    $.get(`https://api.coingecko.com/api/v3/coins/${coins[i].id}`, coins=>{
                    for (let coin1 of coins) {
                        // console.log(coin.current_price[0].usd)
                        $(e.currentTarget.parentNode).append(`<div>hi${coin.name}
                        </div>`);
                        }     
                    });
                });


            });


        };
    });
});

【问题讨论】：

标签： jquery api dom append

【解决方案1】：

您将无法在第二次调用的点击处理程序中的第一次 API 调用中使用循环中的相同索引。

其中很多 ID 都以数字开头，因此您无法将它们按原样用作 CSS 选择器，但您可以在循环内使用 <button id="coinid-${coins[i].id}" class="moreInfo">More Info</button> 之类的内容。

在您的点击处理程序中，您可以引用每个按钮的 id：

let btnid = e.target.id;
let id = btnid.substring(7); // button id without 'coinid-'

然后您就可以针对该特定 ID 进行适当的 API 调用。

【讨论】：