Json将www.example.com解析Socket.io为HTML表格

vs3odd8k 于 2022-12-20 发布在其他

关注(0)|答案(2)|浏览(96)

I have sample from Socket.io which is display price ticker of cryptocurrency. I try to find way to parse this socket to HTML table but still not find the resources. Here is the sample code using 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>

Here is sample of output string from above code :
{"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"}
I want to parse above value to HTML table like this :

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

Any idea how to parse json from socket to html table?? thanks for help.

JSON

来源：https://stackoverflow.com/questions/52219998/json-parse-socket-io-to-html-table

2条答案

按热度按时间

fwzugrvs1#

解析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>

另一方面，更新会更有趣，因为您必须为每个条目创建一个键，并跟踪该条目是否已经有一行。

赞(0）回复(0）举报 2022-12-20

j2qf4p5b2#

基于上面的答案，我只是修改了代码，使其工作，而不添加新的行。

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

赞(0）回复(0）举报 2022-12-20

我来回答

Json将www.example.com解析Socket.io为HTML表格

2条答案

相关问题

热门标签

最新问答