坚持在Javascript中调用JSON
我正在尝试构建一个计算器，在这里您可以选择不同的加密货币，并构建用于测试和跟踪的投资组合。为此，我选择了Coingecko v3，并使用v3进行API调用。https://www.coingecko.com/en/api
API调用正常工作，我从服务器获得JSON数据。我构建了一个函数来传递前100枚硬币，将它们放入Datalist标签中，以便从输入中进行选择：
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循环来执行响应。如果用户从这个Datalist中选择一个选项，我会尝试显示硬币的价格，为了进一步的功能，我认为最好能调用一个像data.coinname.current_price这样的对象，这样我就可以构建一个函数，在那里我可以传递一个字符串给它，并得到这个硬币的价格。
但是，现在我必须使用data.current_price作为列表中第一项的current Price。调用列表中的项可能会随着时间的推移而改变，因此我不能进行静态分配，我认为每次调用API时都可以这样做，但如果有一个函数作为字符串提供给我的目标来执行Price调用，将不会对我的目标有任何好处。
这是有可能得到的价格在同一电话名单，但我不知道我将如何能够做我的想法。在API的站点上列出了不同的调用，其中第一个调用是/ coin /list调用，它说“使用它获取所有硬币的id以便进行API调用”，并为每个可用的硬币提供一个JSON对象，如下所示：
{
"id": "1inch",
"symbol": "1inch",
"name": "1inch"
} 我需要先打这个电话才能实现我的想法吗？但我不知道这怎么能帮我找到我想要的解决方案.我很难找到解决这个问题的办法，我觉得自己不太明白，也不应该像我现在想的那么难:如果你知道如何做到这一点，请告诉我！
回答 1
Stack Overflow用户
发布于 2021-03-27 16:18:22
你可以这样做。我把html保持简单。
- fetch_coinlist:获取一个硬币列表。在获取硬币列表之后，它将结果转换为对象而不是列表。每枚硬币都可以使用
coins["<coin id>"]. - show_coinlist访问，当您选择一个项目时，visualisation
- 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>
https://stackoverflow.com/questions/66832855
复制相似问题
腾讯云开发者
