How to show specific variable in jQuery from JSON REST-API?
After using the get method I am getting following JSON.
API link https://infocityonline.com/tennis/rest-api/?id=bitcoin
I want to show JSON id value in #id and symbol value in #symbol div.
Right now my code is just showing data in the console.
<!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" } ]
You can do something like this
$.ajax(settings).done(function (response) { response = JSON.parse(response) document.getElementById('id').innerHTML = response[0].id; document.getElementById('symbol').innerHTML = response[0].symbol });
Here is the codepen: https://codepen.io/kishin-karra/pen/VwvoeLm