Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Add data into 2 coloumns in same row with the data coming from Javascipt Websocket

I am new to JavaScript, not sure if this very basic question. I’ve created a Bitcoin Price update dashboard using the data fetched from the external WebSocket. I managed to get the data from the WebSocket and display it on the HTML table but i was only able to fetch only the live price of the bitcoin I want to also display the Bitcoin quantity in the other coloumn. I wannna know how to Append two different data in 2 coloumns in one row. I tried my best to explain.

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

NOTE***
I’m Pulling the data from a External websocket and with that WebSocket i can get all the details like Bitcoin price, quantity, type and everything. "messageObject.p" means Price and "messageObject.q" means Quantity. p=price and q=quantity. I’m able to get the messageObject.q (quantity) to be displayed on the table but I’m unable to show the messageObject.p (price) in the other column of the Table

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

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

>Solution :

You only have one parameter in your insertRow() function. Also, inside of your insertRow() function, you are never trying to read from the passed in quantity variable.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading