Fetch and display JSON data correctly without "undefined"

Question

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>

Alexandre Juma · Accepted Answer · 2019-06-30 01:09:15Z

2

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>';


};

answered Jun 30, 2019 at 1:09

Alexandre Juma

3,3532 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ch3vv Over a year ago

Sorry i didn't know there's an option to accept response :-) .. if you dont mind i have another problem, i want to make use of this API from newsapi.org/docs/get-started var url = 'newsapi.org/v2/everything?' + 'q=Bitcoin&' + 'from=2019-06-30&' + 'sortBy=popularity&' + 'apiKey=127585aa80454ec1b4592edaf30fe366'; var req = new Request(url); fetch(req) .then(function(response) { console.log(response.json()); })

Alexandre Juma Over a year ago

You should create a new question for that.

3960278 · Accepted Answer · 2019-06-30 01:24:42Z

<! 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>

Collectives™ on Stack Overflow

Fetch and display JSON data correctly without "undefined"

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related