当新数据来自带有 Javascript 的 Websocket 时，自动将行添加到表中答案

【问题标题】：Automatically Add rows to the Table when new data comes from a The Websocket with Javascript当新数据来自带有 Javascript 的 Websocket 时，自动将行添加到表中
【发布时间】：2022-01-09 05:54:16
【问题描述】：

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

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

请告诉我应该如何将行动态插入到 HTML 表格中。非常感谢您。

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

【问题讨论】：

这能回答你的问题吗？ How to insert a row in an HTML table body in JavaScript
不 :( 我想在新数据来自 Websocket 时自动添加行。请有人帮助我 :(
你读过那个帖子的答案了吗？你就是这样做的
是的，我读到了，但它不适用于 websocket 数据
用 websocket 数据的样子更新你的问题

标签： javascript websocket datatables real-time-updates real-time-data

【解决方案1】：

假设您已准备好 HTML 格式的表格，其中比特币行如下所示。然后只需选择 <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>

【讨论】：

它有效，但我想在价格更新时添加新行。这显示了一行中的实时价格。谢谢你。价格更新时如何添加新行？请帮帮我
这就像对 <tbody> 元素 (#pricetable) 的 appendChild() 操作一样简单，但是当您看到价格更新疯狂时。你真的想在每次更新时添加一个新行吗？
是的，请帮我写代码。
我是初学者，如果你能帮助我，那就太好了
@USMAN 您也可以使用insertRow 方法，但这样您可以更好地了解元素通常是如何插入的。

【解决方案2】：

为您的表添加一个 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>`;
}

我已将此帖子标记为与this one 重复。但是 OP 需要更多帮助来了解如何将答案应用于他们的情况。所以我提出了一个答案

【讨论】：

谢谢。 “messageObject.p”在控制台中显示实时比特币价格。但我想把它显示在一张桌子上，如果价格更新我想自动添加一个新行。此代码显示类似“Uncaught TypeError: table.newRow is not a function”的错误
哎呀，这是一个错字，我已经更新了我的答案。另外，我知道这是实时比特币价格。然而它看起来像什么？当它在您的控制台中运行时，您是否只看到一个数字？还是它是一个对象？
是的，我看到比特币实时价格像“41411.58000000”。我希望它显示在表格中。
你试过这个更新的代码吗？
非常感谢您帮助我。我已经解决了这个问题。谢谢你:)