Pushing data from socket.io into array

Question

I have the following problem that I cant seem to work out. I'm trying to get an array of arrays from my socket.io emitter that is structured like follows:

[ [{...},{...},{...}] , [{...},{...}] , [{...}] ]

Instead I get this:

I need all the arrays in one master array so that I can render bootstrap cards for each sub array.

Client side code:

const socket = io("http://localhost:5000");

    socket.on('data', (dta) => {
        handleData(dta.data);  
    })

    function handleData(data) {
      const masterArray= [];
        masterArray.push(data);  
        console.log(masterArray);   
    }

Server side code:

for(let i = 0 ; i < alarmpanels.length ; i++) {
const ElkClient = elkClient.ElkClient;
    let client = new ElkClient({
        connection: {
          name: alarmpanels[i].name,
          host: alarmpanels[i].host,
          port: alarmpanels[i].port,
          secure: alarmpanels[i].secure,
          zones: alarmpanels[i].zones
     }
  });

  connectClient(client);
}

  async function connectClient(client) {
    await client.connect();
    const zonesArray = client.options.connection.zones;
    const arr = [];
      try {
        const clhost = client.options.connection.host;
        const clport = client.options.connection.port;
        const clsecure = client.options.connection.secure;
        let data = await client.getArmingStatus();
        for (i = 0 ; i < zonesArray.length ; i ++) {
        const armUpState = await data.areas[i].armUpState;
        const clName = client.options.connection.name;
        const zoneName = zonesArray[i].name;
        const siteName = zonesArray[i].site;
        const clzone = zonesArray[i].zone;
        const totalPanels = zonesArray[i].length;

        const info = new PanelStatus(clhost, clport ,clsecure, clzone, siteName, clName, zoneName, armUpState, totalPanels);
        arr.push(info);
        }


      io.on('connection', (socket, req) => {
          socket.emit('data', {data: arr});
        })

      }
      catch (err) {
        console.log("Connection Lost!");
      }

    }

So do you want [ [{...},{...},{...}] , [{...},{...}] , [{...}] ] to become [{...}, {...}, {...}, {...}, {...}, {...}]? — Jacob
– Jacob, Commented Feb 15, 2020 at 7:48
As simple solution you can use lodash functions, such as flatten — Arturas Lapinskas
– Arturas Lapinskas, Commented Feb 15, 2020 at 7:51
For some reason, the Arrays overwrite each other as they come in through the socket. Arr.length always shows one array with objects inside. I have 6 data sets that my server side for loop iterates over and feeds them into my connect client function. My connectClient() creates new PanelStatus objects and pushes each object into a server side array and this array is being streamed to my client. For some reason though, I'd need each received array to be pushed into a client side array. Also, I need the arrays to stay grouped as they come in so i'm not sure if flatten would work. — Mike B.
– Mike B., Commented Feb 15, 2020 at 8:11
The data comes from alarm systems at various locations and I need to render the objects inside each array graphically after evaluating the armUpState for each object. — Mike B.
– Mike B., Commented Feb 15, 2020 at 8:20

Siva Kondapi Venkata · Accepted Answer · 2020-02-15 08:34:35Z

1

Your client code need slight changes
1) keep the masterArray declaration outside of handleData
2) When pushing to masterArray, use ... spread operator.

const masterArray = [];

/*

const socket = io("http://localhost:5000");

socket.on("data", dta => {
  handleData(dta.data);
}); 

*/

function handleData(data) {
  masterArray.push(...data);
}

handleData([{ a: 4 }, { b: 5 }]);
handleData([{ z: 4 }]);
handleData([{ p: 4 }, { q: 5 }, { r: 5 }]);

console.log(masterArray);

answered Feb 15, 2020 at 8:34

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jacob · Accepted Answer · 2020-02-15 08:02:28Z

0

If you can use es2020, you can use Array.flat()

let startingArray = [
  [{
    entry1: 1,
    entry2: 2,
    entry3: 3
  }, {
    entry4: 4,
    entry5: 5,
    entry6: 6
  }, {
    entry7: 7,
    entry8: 8,
    entry9: 9
  }],
  [{
    entry10: 10,
    entry11: 11,
    entry12: 12
  }, {
    entry13: 13,
    entry14: 14,
    entry15: 15
  }],
  [{
    entry16: 16,
    entry17: 17,
    entry18: 18
  }]
]

const flattened = startingArray.flat()

console.log('startingArray', startingArray)
console.log('flattened', flattened)

edited Feb 15, 2020 at 8:02

answered Feb 15, 2020 at 7:54

Jacob

9262 gold badges8 silver badges19 bronze badges

Collectives™ on Stack Overflow

Pushing data from socket.io into array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related