Загрузка данных из socket.io в массив

Question

У меня есть следующая проблема, которую я не могу решить. Я пытаюсь получить массив массивов из моего эмиттера socket.io, который имеет следующую структуру:

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

Вместо этого я получаю это:

Мне нужны все массивы в одном мастер-массиве, чтобы я мог рендерить bootstrap карт для каждого подмассива.

Код на стороне клиента:

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

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

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

Сервер боковой код:

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!");
      }

    }

Answer 1

Ваш клиентский код нуждается в незначительных изменениях
1) сохранить объявление masterArray вне handleData
2) При нажатии на masterArray использовать оператор распространения ....

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);

Answer 2

Если вы можете использовать es2020, вы можете использовать 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)