当新数据来自具有 Javascript 的 Websocket 时，自动将行添加到 Table

Question

我是 JavaScript 的新手，不确定这个问题是否非常基本。我正在尝试使用从外部 WebSocket 获取的数据创建比特币价格更新仪表板。我设法从 WebSocket 获取数据。价格每秒更新一次，我不确定如何将行数据动态推送到 HTML table 中。我尝试迭代数组，但我仍然无法继续。

我提供了下面的代码片段以及我从中提取数据的外部 Websocket。

请告诉我如何将行动态插入 HTML table。非常感谢您。

<body>
    <table>
        <thead>
            <tr>
                <th scope="col">Price</th>
            </tr>
        </thead>
        <tbody  id="pricetable">
            
        </tbody>
    </table>

    <script>
        var binanceSocket = new WebSocket("wss://stream.binance.com:9443/ws/btcusdt@trade");
        binanceSocket.onmessage = function (event) {
        var messageObject = JSON.parse(event.data)
         console.log(messageObject.p);
    var table = document.getElementById('pricetable')
          }
    </script>
</body>

Answer 1

为您的 table 添加一个 ID，以便您可以正确访问它。

<table id="priceTable">

然后像这样添加新数据（因为我不知道 messageObject.p 的形状，我假设它是一个字符串）：

var binanceSocket = new WebSocket("wss://stream.binance.com:9443/ws/btcusdt@trade");
binanceSocket.onmessage = function (event) {
   var messageObject = JSON.parse(event.data);
   console.log(messageObject.p);
   var table = document.getElementById('priceTable').getElementsByTagName('tbody')[0];
   var newRow = table.insertRow(table.rows.length);
   newRow.innerHtml = `<p>${messageObject.p}</p>`;
}

我已将此 post 标记为 this one 的副本。但是，OP 在如何将答案应用于他们的情况方面需要更多帮助。所以我把答案放上去

Answer 2

假设您的 table in HTML 准备好比特币行，如下所示。然后只需 select 价格的 <td> 单元格并相应地格式化图形，然后再插入它的 textContent.

function insertRow(price){
  var tr      = document.createElement("tr"),
      tdCoin  = document.createElement("td"),
      tdPrice = document.createElement("td"),
      docFrag = new DocumentFragment();
  tdCoin.textContent = "BTC";
  tdPrice.textContent = `${Number(price.slice(0,-6)).toLocaleString("en-US",{style: 'currency', currency: 'USD'})}`;
  tr.appendChild(tdCoin);
  tr.appendChild(tdPrice);
  docFrag.appendChild(tr);
  return docFrag;
}

var binanceSocket = new WebSocket("wss://stream.binance.com:9443/ws/btcusdt@trade"),
    table = document.getElementById("pricetable");
binanceSocket.onmessage = function(event) {
  var messageObject = JSON.parse(event.data);
  table.appendChild(insertRow(messageObject.p));
}

<body>
  <table>
    <thead>
      <tr>
        <th>Coin</th>
        <th scope="col">Price</th>
      </tr>
    </thead>
    <tbody id="pricetable">
    </tbody>
  </table>
</body>

当新数据来自具有 Javascript 的 Websocket 时，自动将行添加到 Table

Automatically Add rows to the Table when new data comes from a The Websocket with Javascript

javascript

datatables

real-time-data

websocket

real-time-updates