使用来自 Javascript Websocket 的数据将数据添加到同一行的 2 列中

Question

我是 JavaScript 新手，不确定这个非常基本的问题。我使用从外部 WebSocket 获取的数据创建了一个比特币价格更新仪表板。我设法从 WebSocket 获取数据并将其显示在 HTML 表上，但我只能获取比特币的实时价格，我还想在另一列中显示比特币数量。我想知道如何在一行的 2 列中附加两个不同的数据。我尽力解释了。

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

注意：我从外部 websocket 中提取数据，通过这个 websocket，我可以获得比特币价格、数量、类型等所有细节。 “messageObject.p”表示价格，“messageObject.q”表示数量。 p=价格，q=数量。我可以让 messageObject.q（数量）显示在表格上，但我无法在表格的另一列中显示 messageObject.p（价格）。

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

<table id="tableprice" class="table table-striped">
    <thead>
        <tr>
            <th>Amount(BTC)</th>
            <th scope="col">Price(USDT)</th>
        </tr>
    </thead>
    <tbody id="pricetable" class="crypt-table-hover">
    </tbody>
</table>

<script>
        window.onload = () => {
            function insertRow(price){
  var tr      = document.createElement("tr"),
      tdCoin  = document.createElement("td"),
      tdPrice = document.createElement("td"),
      docFrag = new DocumentFragment();
      tdPrice.style.color="#49C279";
    tdCoin.textContent = `${(price.slice(0)).toLocaleString("en-US")}`;
  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@aggTrade"),
    table = document.getElementById("pricetable");
binanceSocket.onmessage = function(event) {
  var messageObject = JSON.parse(event.data);
  table.appendChild(insertRow(messageObject.q, messageObject.p));

  

  const MAX_ROWS = 16;
    const rows = table.querySelectorAll("tr");
    if (rows.length > MAX_ROWS) table.removeChild(rows[0]);


}
        
    </script>

Answer 1

insertRow() 函数中只有一个参数。此外，在您的 insertRow() 函数内部，您永远不会尝试从传入的数量变量中读取。

Answer 2

我发现你为 insertRow 函数发送了两个参数，而在函数中只接收了一个并附加了它。 所以我尝试像下面这样编辑你的代码

<table id="tableprice" class="table table-striped">
  <thead>
    <tr>
      <th>Amount(BTC)</th>
      <th scope="col">Price(USDT)</th>
    </tr>
  </thead>
  <tbody id="pricetable" class="crypt-table-hover"></tbody>
</table>

<script>
          window.onload = () => {
              function insertRow(numberOfCoins,price){
    var tr      = document.createElement("tr"),
        tdCoin  = document.createElement("td"),
        tdPrice = document.createElement("td"),
        docFrag = new DocumentFragment();
        tdPrice.style.color="#49C279";
      // tdCoin.textContent = `${(price.slice(0)).toLocaleString("en-US")}`;
    tdPrice.textContent = `${Number(price.slice(0,-6)).toLocaleString("en-US",{style: 'currency', currency: 'USD'})}`;
    tdCoin.textContent = `${numberOfCoins}`;
    tr.appendChild(tdCoin);
    tr.appendChild(tdPrice);
    docFrag.appendChild(tr);
    return docFrag;
  }


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



    const MAX_ROWS = 16;
      const rows = table.querySelectorAll("tr");
      if (rows.length > MAX_ROWS) table.removeChild(rows[0]);


  }
}
</script>