Question 174102 in Javascript Question posted in
A very good W3school tutorial can be found here.

Paginate big array with javascript

I have a js array that will cause some issue to my electron app due to it’s size, it will contain about 53000 objects. To avoid performances issues, how I can split it when data are loaded on application start? at the moment I’m getting the data from ad odbc access file and pushing it to an array on the front-end using vuejs.

background.js

ipcMain.on('init', (event, ...args) => {
    let suppliersData = false
    let clientsData = false
    suppliersdb.query('SELECT * FROM FANFOR0F_1')
        .then( (results) => {
            console.log(results.length)
            //
            suppliersData = true
            //result.NEMA = result.NEMA.replace('ยง', '@')
            event.sender.send('suppliersData', results)            
        }).catch( e => { 
            console.log(e) 
            event.sender.send('databaseUpdateError', e)
        })
    clientsdb.query('SELECT * FROM PDECON0F_1')
        .then( (results) => {
            console.log(results.length)
            clientsData = true
            event.sender.send('clientsData', results)
        }).catch( e => {
            console.log(e)
            event.sender.send('databaseUpdateError', e)
        })
    //
    if( suppliersData && clientsData ){
        event.sender.send('databaseUpdateCompleted')
    }
})

vue frontend-loading time mounted() hook

        window.ipcRenderer.send('init')
        window.ipcRenderer.receive('suppliersData', (data) => {
            this.suppliersDataAvailable = true
            this.store.suppliers = data
        })
        window.ipcRenderer.receive('clientsData', (data) => {
            console.log(data)
            this.clientsDataAvailable = true
            this.store.clients = data
        })

My idea is to split it into different pages or lazyload the content when page is scrolled, I’m implementing rxdb to have a local copy of the data and decrease loading time on application startup. Any suggestion will be appreciated.

Tags:

2

Answers


  1. 0

    I have a solution:

    const array = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14];
//main array that you want to split
const arrays = [];
//small arrays
const arraysLengths = 4;
//elements in one array
let array1 = [] 
//temporary array


for (let i = 0; i < array.length; i=i+arraysLengths) {
    for (let j = 0; j < arraysLengths; j++) {
        if ((i+j) <= array.length - 1) {
            array1.push(array[i+j])
        }

    };
    //this is the code that splits arrays

arrays.push(array1);
array1=[]
//transfer arrays into another array
};
console.log(arrays)  //show result

    You can insert any natural number in arrayLengths and it will work.
    You can find all the arrays in arrays array

    Login or Signup to reply.
  2. 0

    i found an easier solution that involves .slice() method:

    const array = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14];
const arrays = [];
const arraysLengths = 4;
for (let i = 0; i < array.length; i=i+arraysLengths) {
    arrays.push(array.slice(i,i+arraysLengths));
    
};
console.log(arrays);

    everything works the same. Except you don’t need that temporary array anymore.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search