Question

我有来自Socket.io的示例，它是加密货币的显示价格行情指示器。我试图找到一种方法来将此套接字解析为HTML表，但仍然找不到资源。这是使用socket.io javascript的示例代码：

        <!DOCTYPE html>
    <html>

        <head>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
        </head>

        <body>
            <div id='trade'> open console </div>
        </body>

        <script type="text/javascript">
            var socket = io.connect('https://coincap.io');
            socket.on('trades', function (tradeMsg) {
                console.log(tradeMsg);
                document.getElementById('trade').innerHTML = JSON.stringify(tradeMsg)
            })
        </script>

    </html>

以下是上述代码中输出字符串的示例：

{“ coin”：“ BTC”，“ exchange_id”：“ bitfinex”，“ market_id”：“ BTC_USD”，“ message”：{“ coin”：“ BTC”，“ msg”：{“ cap24hrChange”： 0.98，“ long”：“ Bitcoin”，“ mktcap”：112062520162.10434，“ perc”：0.98，“ price”：6454.5，“ shapeshift”：true，“ short”：“ BTC”，“ supply”：17254075，“ usdVolume “：4485870675.82，”音量“：4485870675.82，” vwapData“：6452.35557294237，” vwapDataBTC“：6452.35557294237}}，” msg“：{” cap24hrChange“：0.98，” long“：” Bitcoin“，” mktcap“：112062520162.10434，” perc“：0.98，”价格“：6454.5，” shapeshift“：true，” short“：” BTC“，”供应“：17254075，” usdVolume“：4485870675.82，” volume“：4485870675.82，” vwapData“：6452.35557294237，” vwapDataBTC“：6452.35557294237}，” NODE_ID“：1，” WORKER_ID“：” 3002“}

我想将上述值解析为HTML表：

<table>
    <tr>
    <td>COIN</td>
    <td>EXCHANGE</td>
    <td>MARKET</td>
    </tr>
    <tr>
    <td>value coin here</td>
    <td>value exchange here</td>
    <td>value market here</td>
    </tr>
    </table>

任何想法如何将json从套接字解析为html表？感谢您的帮助。

Answer 1

仅解析为HTML表非常简单。注意，以下代码使用模板字符串。它还没有适当的检查来验证消息或表的存在。因此，您可能需要添加这些内容。

function toTable( msg ) {
  document.getElementById( 'results' )
          .insertAdjacentHTML( 'beforeend',
            `<tr><td>${msg.coin}</td><td>${msg.exchange_id}</td><td>${msg.market_id}</td></tr>`
          );
}

toTable( {"coin":"BTC","exchange_id":"bitfinex","market_id":"BTC_USD","message":{"coin":"BTC","msg":{"cap24hrChange":0.98,"long":"Bitcoin","mktcap":112062520162.10434,"perc":0.98,"price":6454.5,"shapeshift":true,"short":"BTC","supply":17254075,"usdVolume":4485870675.82,"volume":4485870675.82,"vwapData":6452.35557294237,"vwapDataBTC":6452.35557294237}},"msg":{"cap24hrChange":0.98,"long":"Bitcoin","mktcap":112062520162.10434,"perc":0.98,"price":6454.5,"shapeshift":true,"short":"BTC","supply":17254075,"usdVolume":4485870675.82,"volume":4485870675.82,"vwapData":6452.35557294237,"vwapDataBTC":6452.35557294237},"NODE_ID":1,"WORKER_ID":"3002"} );

<table id="results">
  <tr>
    <th>COIN</th>
    <th>EXCHANGE</th>
    <th>MARKET</th>
  </tr>
</table>

另一方面，更新将变得更加有趣，因为您必须为每个条目创建一个密钥并跟踪该条目是否已经存在一行。

Answer 2

基于以上答案，我只是修改代码以使其工作而无需添加新行。这是代码。

<!DOCTYPE html>
<html>

    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
    </head>

    <body>
        <div id='trade'></div>
    </body>

    <script type="text/javascript">

  function toTable( data ) {
  document.getElementById( 'results' ).innerHTML = "<tr><th>COIN</th><th>EXCHANGE</th><th>MARKET</th><th>PRICE</th></tr>";
  document.getElementById( 'results' ).innerHTML += "<tr><td>" + data.coin + "</td><td>" + data.exchange_id.toUpperCase() + "</td><td> " + data.market_id + "</td><td>" + data.message.msg.price + "</td></tr>";
}

        var socket = io.connect('https://coincap.io');
        socket.on('trades', function (tradeMsg) {
            console.log(tradeMsg);
            //document.getElementById('trade').innerHTML = JSON.stringify(tradeMsg);
            toTable(tradeMsg);


        })

    </script>

</html>

<table  border="1" id="results"></table>

Json将Socket.io解析为HTML表

2 个答案: