GET-запрос от 2-х API в одной функции (JQuery)

Question

Я пытаюсь создать страницу на основе API CoinGecko. Меня попросили сделать два разных запроса GET с использованием JQuery, один без параметра и один с параметром id, но я не могу написать все правильно со вторым API.

Первый API получает информацию о каждой монете и показываетэто символ и имя. Данные показаны в div, одна монета за div. В каждом элементе есть кнопка «Подробнее», где отображаются данные из второго запроса GET. Я хочу показать в разделе «Подробнее» разделить значение каждой монеты в долларах США, стоимость евро и ее изображение.

Я буду рад получить помощь по второму 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>`);
                        }     
                    });
                });


            });


        };
    });
});

Answer 1

Вы не сможете использовать тот же индекс из цикла в первом вызове API в обработчике кликов для второго вызова.

Многие из этих идентификаторов начинаются с цифры, поэтому вы не сможете использовать их как селекторы CSS, как есть, но вы можете использовать что-то вроде <button id="coinid-${coins[i].id}" class="moreInfo">More Info</button> внутри цикла.

Внутри вашего обработчика кликов вы можете ссылаться на идентификатор каждой кнопки:

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

После этого вы сможете выполнить соответствующий вызов API для этого конкретного идентификатора.