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 column. I want to know how to append two different data in 2 columns 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 an 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.
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>
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>