如何从 JSON REST-API 在 jQuery 中显示特定变量？

Question

使用 get 方法后，我开始关注 JSON。

API 链接https://infocityonline.com/tennis/rest-api/?id=bitcoin

我想在#id 中显示 JSON id 值，在#symbol div 中显示符号值。

现在我的代码只是在控制台中显示数据。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://infocityonline.com/tennis/rest-api/?id=bitcoin",
    "method": "GET",

}

$.ajax(settings).done(function (response) {
    console.log(response);



});
</script>
</head>
<body>
    <div id="id">  </div>
    <div id="symbol ">  </div>
</body>
</html>

[
    {
        "id": "bitcoin",
        "symbol": "btc",
        "name": "Bitcoin",
        "image": "https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579",
        "current_price": 9409.45,
        "market_cap": 173153275856,
        "market_cap_rank": 1,
        "total_volume": 30609526190,
        "high_24h": 9582.42,
        "low_24h": 9350.51,
        "price_change_24h": -29.23718676,
        "price_change_percentage_24h": -0.30976,
        "market_cap_change_24h": -986277704.740356,
        "market_cap_change_percentage_24h": -0.56637,
        "circulating_supply": 18388787.0,
        "total_supply": 21000000.0,
        "ath": 19665.39,
        "ath_change_percentage": -52.07157,
        "ath_date": "2017-12-16T00:00:00.000Z",
        "atl": 67.81,
        "atl_change_percentage": 13799.79978,
        "atl_date": "2013-07-06T00:00:00.000Z",
        "roi": null,
        "last_updated": "2020-05-29T18:15:23.854Z"
    }
]

Answer 1

你可以做这样的事情

$.ajax(settings).done(function (response) {
response = JSON.parse(response)
 document.getElementById('id').innerHTML = response[0].id;
document.getElementById('symbol').innerHTML = response[0].symbol
});

这是代码笔： https://codepen.io/kishin-karra/pen/VwvoeLm

如何从 JSON REST-API 在 jQuery 中显示特定变量？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-05-29 19:38:33

如何从 JSON REST-API 在 jQuery 中显示特定变量？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-05-29 19:38:33

解决方案1
0 已采纳 2020-05-29 19:38:33