Add data into 2 columns in same row with the data coming from Javascipt Websocket
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.
I found that u send two parameters for the insertRow function and receive only one at the function and append it. so I tried to edit ur code like the following
<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>