CODEWITHSUNDEEP
javascripthtmljson
Ch3vv
Ch3vv

Reputation: 43

Fetch and display JSON data correctly without "undefined"

This code is able to fetch and display JSON data but it also shows "undefined" after showing numbers, i want it to show only numbers/prices and not show "undefined" at all. thanks.

<! DOCTYPE html>
<html lang="eng">

<head>
  <title> </title>
</head>
</head>
<style>
  body {
    padding-left: 20px;
    padding-top: 10;
  }
</style>

<body>


  <div id="output">

  </div>


  <script>
    const pricesWs = new WebSocket('wss://ws.coincap.io/prices?assets=ALL')

    pricesWs.onmessage = function(msg) {
      console.log(msg.data);

      var obj = JSON.parse(msg.data);

      document.getElementById("output").innerHTML = '<ol style="font-size:17px;font-family:Arial">' +
        '<li>Bitcoin &emsp;<b>-BTC-</b>' + obj.bitcoin + '</li><br><br>' +
        '<li>Ethereum &emsp;<b>-BTC-</b>' + obj.ethereum + '</li><br><br>' +
        '<li>Litecoin &emsp;<b>-BTC-</b>' + obj.litecoin + '</li><br><br>' +
        '</ol>';


    };
  </script>
</body>

</html>

Upvotes: 0

Views: 133

Answers (2)

3960278
3960278

Reputation: 796

<! DOCTYPE html>
<html lang="eng">

<head>
  <title> </title>
</head>
</head>
<style>
  body {
    padding-left: 20px;
    padding-top: 10;
  }
</style>

<body>


  <div id="output">

  </div>


  <script>
    const pricesWs = new WebSocket('wss://ws.coincap.io/prices?assets=ALL')

    pricesWs.onmessage = function(msg) {
      // console.log(msg.data);

      var obj = JSON.parse(msg.data);

      var bitcoinLiHtml = '';
      if (obj.bitcoin) {
        bitcoinLiHtml = '<li>Bitcoin &emsp;<b>-BTC-</b>' + obj.bitcoin + '</li><br><br>';
      }

      var ethereumLiHtml = '';
      if (obj.ethereum) {
      ethereumLiHtml = '<li>Ethereum &emsp;<b>-BTC-</b>' + obj.ethereum + '</li><br><br>';
      }

      var litecoinLiHtml = '';
      if (obj.litecoin) {
      litecoinLiHtml = '<li>Litecoin &emsp;<b>-BTC-</b>' + obj.litecoin + '</li><br><br>';
      }

      document.getElementById("output").innerHTML = '<ol style="font-size:17px;font-family:Arial">' +
        bitcoinLiHtml + ethereumLiHtml + litecoinLiHtml +
        '</ol>';
    };
  </script>
</body>

</html>

Upvotes: 1

Alexandre Juma
Alexandre Juma

Reputation: 3323

This is happening because if you inspect the websocket JSON objects, the keys "litecoin", "ethereum" and "bitcoin" are not always present.

If you check these two lines, no "litecoin" key exists. This a sample case where undefined would be rendered in your page.

{"bitcoin":"12134.47555858","game":"0.01003290","hive-project":"0.00668094","gamecredits":"0.07752385","bitcoin-cash":"445.18730470","eos":"6.37440917","ethereum":"322.95792616","ontology":"1.56287491"} {"shinechain":"0.00267763","roulettetoken":"0.00800351","bitcoin":"12134.44826914","ttc-protocol":"0.07762756","libra-credit":"0.05395170","tron":"0.03498547","bitcoin-cash":"445.18695648","ethereum":"322.95758114"}

A simple way of overcoming this is checking if they're present in the JSON object and update dedicated variables that hold the last known values.

const pricesWs = new WebSocket('wss://ws.coincap.io/prices?assets=ALL')
var litecoin = 0
var bitcoin = 0
var ethereum = 0

pricesWs.onmessage = function(msg) {
    console.log(msg.data);

    var obj = JSON.parse(msg.data);

    if (obj.hasOwnProperty('litecoin')) {
        litecoin = obj.litecoin
    }
    if (obj.hasOwnProperty('ethereum')) {
        ethereum = obj.ethereum
    }
    if (obj.hasOwnProperty('bitcoin')) {
        bitcoin = obj.bitcoin
    }

    document.getElementById("output").innerHTML = '<ol style="font-size:17px;font-family:Arial">' +
        '<li>Bitcoin &emsp;<b>-BTC-</b>' + bitcoin + '</li><br><br>' +
        '<li>Ethereum &emsp;<b>-BTC-</b>' + ethereum + '</li><br><br>' +
        '<li>Litecoin &emsp;<b>-BTC-</b>' + litecoin + '</li><br><br>' +
        '</ol>';


};

Upvotes: 2

Related Questions