Assign data from websocket to variables

I’m getting data from a website via a websocket stream, I can see it clearly as a Json object in the console, and now I would like to display it in my frontend but I’m not sure how to do it. I tried assigning the data to a variable but I struggle a little bit to dot so. Is that even the solution ?

my code that fetches the data goes as follow :

const ws = new WebSocket('wss://');

ws.onopen = function () {
    "type": "subscribe",
    "product_ids": [
    "channels": [

ws.onmessage = function (message) {
 const msg = JSON.parse(;

Even if I manage to display it in my app, it would appear as a whole and I would like to split each key/value pair of the object into different variables to style it properly, how can I do that ?

Thank you very much

16 thoughts on “Assign data from websocket to variables”

  1. you need to store the data inside a variable and update the ui
    by changing the innerText field of an html element <div id="app"></div>:

    const ws = new WebSocket("wss://");
    ws.onopen = function () {
        // changed the request a bit because my pc could not handle
        // the amount of the messages (1 per 0.1ms)
          type: "subscribe",
          channels: [{ name: "status" }]
    // used for a conditional rendering.
    let isFirst = false;
    ws.onmessage = function (message) {
       * destruct currencies value from the data.
       * same as:
       * const currencies =
      const { currencies } = JSON.parse(;
       * get the name of the first or second object in the currencies array.
      if (currencies && currencies.length > 0) {
        const index = isFirst ? 0 : 1;
        const name = currencies[index].name;
        // update is first
        isFirst = !isFirst;
         * find the html element you want to update.
         * update the UI.
        document.getElementById("app").innerHTML = `
            <h1>First coin on the list is <span>${name}</span></h1>

Leave a Comment