Json 将 Socket.io 解析为 HTML 表答案

【问题标题】：Json Parse Socket.io to HTML TableJson 将 Socket.io 解析为 HTML 表
【发布时间】：2018-09-07 09:53:25
【问题描述】：

我有来自 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,"volume":4485870675.82,"vwapData":6452.35557294237,"vwapDataBTC":6452.35557294237}},"msg":{"cap24hrChange":0.98,"long":"Bitcoin","mktcap":112062520162. 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"}

我想像这样将上面的值解析为 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 表吗？谢谢你的帮助。

【问题讨论】：

你能举一个从coincap.io检索到的tradeMsg的例子吗？
谢谢。我刚刚更新了问题

标签： json parsing socket.io

【解决方案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>

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

【讨论】：

谢谢。它的工作原理兄弟。但是仍然存在一个问题，因为“insertAdjacentHTML”总是添加新行。我只想更新行内的值而不是添加新行。
@Harris 这就是我最后提到的。您可以将键添加为data- 属性，然后使用document.querySelector() 获取该行并使用nth-child 或专用类来查找相应的单元格并对其进行更新。

【解决方案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>

【讨论】：