Question

此代码能够获取和显示JSON数据，但在显示数字后也显示“未定义”，我希望它仅显示数字/价格而不显示“未定义”。谢谢。

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

Answer 1

之所以发生这种情况，是因为如果您检查websocket JSON对象，则密钥“ litecoin”，“ ethereum”和“ bitcoin”并不总是存在。

如果选中这两行，则不存在“ litecoin”密钥。这是一个示例案例，其中未定义会在您的页面中呈现。

{“ bitcoin”：“ 12134.47555858”，“ game”：“ 0.01003290”，“ hive-project”：“ 0.00668094”，“ gamecredits”：“ 0.07752385”，“ bitcoin-cash”：“ 445.18730470”，“ eos “：” 6.37440917“，”以太坊“：” 322.95792616“，”本体论“：” 1.56287491“} {“ shinechain”：“ 0.00267763”，“ roulettetoken”：“ 0.00800351”，“ bitcoin”：“ 12134.44826914”，“ ttc-protocol”：“ 0.07762756”，“ libra-credit”：“ 0.05395170”，“ tron”：“ 0.03498547“，”比特币现金“：” 445.18695648“，”以太坊“：” 322.95758114“}

克服此问题的一种简单方法是检查它们是否存在于JSON对象中，并更新保存最后一个已知值的专用变量。

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


};

Answer 2

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

正确获取和显示JSON数据，而不会出现“未定义”

2 个答案: