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

Posted 2023-05-09

【中文标题】一个函数中来自 2 个 API 的 GET 请求（JQuery）

【英文标题】：GET request from 2 APIs in one function (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>`);
                             
                    );
                );


            );


        ;
    );
);

【参考方案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 调用。