Soy nuevo en JavaScript, no estoy seguro de si esta pregunta es muy básica. Creé un panel de actualización de precios de Bitcoin utilizando los datos obtenidos del WebSocket externo. Logré obtener los datos del WebSocket y mostrarlos en la tabla HTML, pero solo pude obtener el precio en vivo del bitcoin. También quiero mostrar la cantidad de Bitcoin en la otra columna. Quiero saber cómo agregar dos datos diferentes en 2 columnas en una fila. Hice mi mejor esfuerzo para explicar.
He proporcionado los fragmentos de código a continuación, así como un Websocket externo desde donde extraigo los datos.
NOTA : Estoy extrayendo los datos de un websocket externo y con ese WebSocket puedo obtener todos los detalles como el precio, la cantidad, el tipo y todo de Bitcoin. "messageObject.p" significa Precio y "messageObject.q" significa Cantidad. p=precio y q=cantidad. Puedo hacer que el mensajeObjeto.q (cantidad) se muestre en la tabla, pero no puedo mostrar el mensajeObjeto.p (precio) en la otra columna de la tabla.
Avíseme cómo debo insertar la fila dinámicamente en una tabla HTML. Muchas gracias de antemano
<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>Solo tiene un parámetro en su función insertRow() . Además, dentro de su función insertRow() , nunca intenta leer la variable de cantidad pasada.
Descubrí que envía dos parámetros para la función insertRow y recibe solo uno en la función y lo agrega. así que traté de editar tu código como el siguiente
<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>