如何在引导程序崩溃/模态内显示来自API的数据

我有一个有关API的学校项目，并且在引导程序崩溃中显示特定数据时，我有问题。

我有一个学校项目，我可以从API服务器中获取有关硬币的数据并提供它。每个硬币都在不同的div中呈现，在该div中有一个按钮。此按钮是"更多信息"，应该从具有特定ID的链接（类似于硬币）显示有关该硬币的更多信息。我设法显示了API服务器的数据，但无法使该按钮工作。这是"更多信息"按钮的链接：https：//api.coingecko.com/api/v3/coins/{id}

这是HTML：

    <body>
    <div class = "header">
        Cryptonite
    </div>
    <div class="line"></div> </br>
    <div class="container">
        <div class="navigation">
            <div id="buttons">
                <button type="button" class="btn btn-link" id="home-btn" onClick="selectTab" name="home">Home</button>
                <button type="button" class="btn btn-link" id="live-btn" onClick="selectTab" name="live">Live Reports</button>
                <button type="button" class="btn btn-link" id="about-btn" onClick="selectTab" name="about">About</button>
            </div> 
            <div class="search">
                <input type="search" placeholder="Search" aria-label="Search through site content"/> <button type="button" class="btn btn-link" id="src-btn" name="src">Search</button>
            </div>
        </div>
    </br>
        <div class="coins">
        </div>
    </div>
</body>

这是脚本：

//This is the function to call the data from the API server
function callCoins() {    
$.ajax({
    url: "https://api.coingecko.com/api/v3/coins/list",
    dataType: "json",
    success: function(data){
        console.log(data);
        for(let i=0;i<100;i++){
            $(".coins").append(`
                <div class="coin">
                    <span>
                        <p id="coin-sym">${data[i].symbol}</p>
                        <p>${data[i].name}</p>
                        <button class="btn btn-primary" data-toggle="collapse" data-target="#a${data[i].id}">More Info</button>
                        <div class="collapse" id="a${data[i].id}">example</div>
                    </span>
                    <div class="custom-control custom-switch">
                     <input type="checkbox" class="custom-control-input" id="b${data[i].id}">
                     <label class="custom-control-label" for="#b${data[i].id}"></label>
                    </div>
                </div>
                </br>
            `)
        }
    }
})
}
//This is the function for 'More Info'
function moreInfo() {
    $.ajax({
        url: "https://api.coingecko.com/api/v3/coins/{id}",
        dataType: "json",
        success: function(data){
            $(".collapse").append(`
                <div class="moreInfo">
                    <span>
                        <p>${data.image.thumb}</p>
                    </span>
                </div>
            `)
        }
    })
}

当我单击"更多信息"时，它应该从链接中显示带有硬币特定ID的数据。

这是一个演示文件

似乎在单击按钮时并没有调用莫尔金函数。因此，您的更多信息HTML按钮必须是这样。

<button class="btn btn-primary" data-toggle="collapse" data-target="#a${data[i].id}"  onClick="moreInfo('${data[i].id}')">More Info</button>

和moreInfo()功能如下

function moreInfo(id) {  /* change 1 - added id parameter*/
    $.ajax({
        url: "https://api.coingecko.com/api/v3/coins/"+id, /* change 2 - added the id parameter to the api call */
        dataType: "json",
        success: function(data){
            $(".collapse").append(`
                <div class="moreInfo">
                    <span>
                        <p>${data.image.thumb}</p>
                    </span>
                </div>
            `)
        }
    })
}

希望这会有所帮助。为了使其显示为图像，您已在P标签中添加图像标签，然后将图像URL绑定到SRC属性中。

相关内容

最新更新

热门标签：