Soy nuevo en JavaScript, no estoy seguro de si esta pregunta es muy básica. Estoy tratando de crear un panel de actualización de precios de Bitcoin utilizando los datos obtenidos del WebSocket externo. Logré obtener los datos del WebSocket. El precio se actualiza cada segundo, no estoy seguro de cómo debo insertar dinámicamente los datos de la fila en una tabla HTML. Traté de iterar la matriz pero aún no puedo continuar.
He proporcionado los fragmentos de código a continuación, así como un Websocket externo desde donde extraigo los datos.
Avíseme cómo debo insertar la fila dinámicamente en una tabla HTML. Muchas gracias de antemano.
<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>Suponiendo que tiene su tabla en HTML lista con la fila para Bitcoin como se muestra a continuación. Luego, simplemente seleccione la celda <td> para el precio y formatee la figura en consecuencia antes de insertarla en su contenido de 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>Agregue una identificación a su tabla, para que pueda acceder a ella correctamente.
<table id="priceTable">
Luego agregue los nuevos datos así (ya que no conozco la forma de messageObject.p , supongo que es una cadena):
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>`; }He marcado esta publicación como un duplicado de esta . Sin embargo, OP necesitaba un poco más de ayuda sobre cómo aplicar la respuesta a su situación. Así que puse una respuesta