0

I am new to JavaScript, not sure if this very basic question. I am trying to create a Bitcoin Price update dashboard using the data fetched from the external WebSocket. I managed to get the data from the WebSocket. The price updates every seconds, I am not sure how should I push the row data into a HTML table dynamically. I tried to iterate the array but still I am not able to proceed.

I have provided the code snippets below as well as external Websocket from where I am pulling the data.

Please let me know how should I insert the row dynamically into a HTML table. Thank you so much in advance.

<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>
US M AN
  • 31
  • 6

2 Answers2

1

Assuming that you have your table in HTML ready with the row for Bitcoin as below. Then just select the <td> cell for price and format the figure accordingly before inserting to it's 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>
Redu
  • 25,060
  • 6
  • 56
  • 76
  • It works but I want to add new rows when the price update. This shows the realtime price in one Row. Thank you. How to add new rows when the price updates? please help me – US M AN Jan 08 '22 at 21:19
  • That's as simple as an `appendChild()` operation to the `` element (#pricetable) however as you see price updates like crazy. Do you really want to add a new row per update..? – Redu Jan 08 '22 at 21:31
  • yeah Please help me with the code. – US M AN Jan 08 '22 at 21:32
  • I'm a beginner So that would be great if u help me – US M AN Jan 08 '22 at 21:33
  • @USMAN You may also use the `insertRow` method but this way you can see better how elements are generally inserted. – Redu Jan 08 '22 at 21:57
0

Add an id to your table, so you can properly access it.

<table id="priceTable">

Then add the new data like so (since i dont know the shape of messageObject.p I am assuming it is a string):

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>`;
}

I have flagged this post as a duplicate of this one. However OP needed a little more help on how to apply the answer to their situation. So I put an answer up

about14sheep
  • 1,813
  • 1
  • 11
  • 18
  • Thank you. 'messageObject.p' shows the realtime bitcoin price in the Console. but I want to show it on a table and also if the price updates i want to automatically add a new row to it. This code shows a Error like this "Uncaught TypeError: table.newRow is not a function" – US M AN Jan 08 '22 at 21:25
  • oops sorry that was a typo, I have updated my answer. Also, I understand that it is the realtime bitcoin price. However what does it look like? when it runs in your console do you see just a number? or is it an object? – about14sheep Jan 08 '22 at 21:29
  • yeah i see the bitcoin live price like "41411.58000000". i want that to display in the table. – US M AN Jan 08 '22 at 21:36
  • have you tried this updated code? – about14sheep Jan 08 '22 at 21:38
  • Yeah the prices are updating in the console but it's not showing in the table. Please help me if u can. I really Appreciate – US M AN Jan 08 '22 at 21:41
  • I dont understand. Have you tried this answer? what happens when you do? is there an error? – about14sheep Jan 08 '22 at 21:42
  • yeah I've Tried the code. There is no error but the data is not showing the table. – US M AN Jan 08 '22 at 21:48
  • did you add the id to the table like in the first part of the answer? – about14sheep Jan 08 '22 at 21:51
  • yeah i've add it – US M AN Jan 08 '22 at 21:54
  • 1
    Thank you so much for helping me out. i've solved the problem. Thank you :) – US M AN Jan 08 '22 at 21:58