JSON API not displaying all values on my HTML

Question

I am a newbie programmer, I am working on a website using Django where I use a JSON API I generated online to print the prices of cryptocurrencies. I am having a challenge as my API is not displaying all the values I want it to display on my html. please note that I've checked with console to ensure the API is working correctly and I confirmed it does but the challenge is I cannot seem to understand why I cannot print it out on my HTML.

Below is my code that I am using to print the prices. The prices that is showing on my HTML is from Bitcoin to Uniswap while the remaining is not showing.

My JAVASCRIPT CODE

var btc = document.getElementById("bitcoin");
var eth = document.getElementById("ethereum");
var doge = document.getElementById("dogecoin");
var lite = document.getElementById("litecoin");
var bin = document.getElementById("binancecoin");
var card = document.getElementById("cardano");
var xrp = document.getElementById("ripple");
var pol = document.getElementById("polkadot");
var uni = document.getElementById("uniswap");
var btc_cas = document.getElementById("bitcoin-cash");
var sol = document.getElementById("solana");
var chain = document.getElementById("chainlink");
var poly = document.getElementById("matic-network");
var theta = document.getElementById("theta-token");
var shiba = document.getElementById("shiba-inu");
var vec = document.getElementById("vechain");
var stel = document.getElementById("stellar");
var file = document.getElementById("filecoin");
var aav = document.getElementById("aave");
var mon = document.getElementById("monero");
var trn = document.getElementById("tron");
var cron = document.getElementById("cronos");

var settings = {
    "async": true,
    "scrossDomain": true,
    "url": "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2Cethereum%2Cdogecoin%2Clitecoin%2Cbinancecoin%2Ccardano%2Cripple%2Cpolkadot%2Cuniswap%2Cbitcoin-cash%2Csolana%2Cchainlink%2Cmatic-network%2Ctheta-token%2Cshiba-inu%2Cvechain%2Cstellar%2Cfilecoin%2Caave%2Cmonero%2Ctron%2Ccronos&vs_currencies=usd",
    "method": "GET",

}
$.ajax(settings).done(function(response){
    btc.innerHTML = response.bitcoin.usd;
    eth.innerHTML = response.ethereum.usd;
    doge.innerHTML = response.dogecoin.usd;
    lite.innerHTML = response.litecoin.usd;
    bin.innerHTML = response.binancecoin.usd;
    card.innerHTML = response.cardano.usd;
    xrp.innerHTML = response.ripple.usd;
    pol.innerHTML = response.polkadot.usd;
    uni.innerHTML = response.uniswap.usd;
    btc.innerHTML = response.bitcoin-cash.usd;
    sol.innerHTML = response.solana.usd;
    chain.innerHTML = response.chainlink.usd;
    poly.innerHTML = response.matic-network.usd;
    theta.innerHTML = response.theta-token.usd;
    shiba.innerHTML = response.shiba-inu.usd;
    vec.innerHTML = response.vechain.usd;
    stel.innerHTML = response.stellar.usd;
    file.innerHTML = response.filecoin.usd;
    aav.innerHTML = response.aave.usd;
    mon.innerHTML = response.monero.usd;
    trn.innerHTML = response.tron.usd;
    cron.innerHTML = response.cronos.usd;
});

MY HTML CODE:

<div class="coin-list">
    <div class="coin">
       <img src="{% static 'images/bitcoin.png' %}">
       <div>
           <h3>$<span id="bitcoin"></span></h3>
           <p>Bitcoin</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/ethereum.png' %}">
       <div>
           <h3>$<span id="ethereum"></span></h3>
           <p>Ethereum</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/dogecoin.png' %}">
       <div>
           <h3>$<span id="dogecoin"></span></h3>
           <p>Dogecoin</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/litecoin.png' %}">
       <div>
           <h3>$<span id="litecoin"></span></h3>
           <p>Litecoin</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/binance.png' %}">
       <div>
           <h3>$<span id="binancecoin"></span></h3>
           <p>Binance coin</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/cardano.png' %}">
       <div>
           <h3>$<span id="cardano"></span></h3>
           <p>Cardano</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/xrp.png' %}">
       <div>
           <h3>$<span id="ripple"></span></h3>
           <p>XRP</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/dot.png' %}">
       <div>
           <h3>$<span id="polkadot"></span></h3>
           <p>Polkadot</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/uniswap.png' %}">
       <div>
           <h3>$<span id="uniswap"></span></h3>
           <p>Uniswap</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/bitcoinn.png' %}">
       <div>
           <h3>$<span id="bitcoin-cash"></span></h3>
           <p>Bitcoin Cash</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/solana.png' %}">
       <div>
           <h3>$<span id="solana"></span></h3>
           <p>Solana</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/chainlink.png' %}">
       <div>
           <h3>$<span id="chainlink"></span></h3>
           <p>Chainlink</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/polygon.png' %}">
       <div>
           <h3>$<span id="matic-network"></span></h3>
           <p>Polygon</p>
       </div>
    </div>
     <div class="coin">
       <img src="{% static 'images/theta.png' %}">
       <div>
           <h3>$<span id="theta-token"></span></h3>
           <p>Theta</p>
       </div>
    </div>
     <div class="coin">
       <img src="{% static 'images/shiba.png' %}">
       <div>
           <h3>$<span id="shiba-inu"></span></h3>
           <p>Shiba Inu</p>
       </div>
    </div>
     <div class="coin">
       <img src="{% static 'images/vechain.png' %}">
       <div>
           <h3>$<span id="vechain"></span></h3>
           <p>Vechain</p>
       </div>
    </div>

score 0 · Answer 1 · answered Dec 02 '22 at 15:02

This is valid syntax, but it doesn't mean what you think it does:

btc.innerHTML = response.bitcoin-cash.usd;

It essentially means this:

btc.innerHTML = response.bitcoin - cash.usd;

The response object has no property called bitcoin, and there is no cash variable. So this is producing an error. Open your browser's debugging tools and observe the error(s) on the console.

You can still use a property with a hyphen in it, you just need to use bracket notation to do it:

btc.innerHTML = response['bitcoin-cash'].usd;

JSON API not displaying all values on my HTML

1 Answers1