asked on

loop through javascript array

Dear experts

I am looping over an array of length 5000.

This is my code snippet

var productData = [];
debugger;
for(i = 0; i < CustomerDataNew.data[0].data.length; i++){
if( customerGroupItem == CustomerDataNew.data[0].data[i].clusterId){
productData.push(CustomerDataNew.data[0].data[i]);
}

Open in new window

I am observing some performance issues with above for loop (slowness)
Can anyone please share what is the best/fastest way to do this?

Thanks.

SOLUTION

dsacker

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dsacker

Here is a little exercise you might like to show the difference. The code below runs through two different functions ten times each. One function uses the push, to push 500,000 numbers into an array. The other uses a fixed-length array. You see the difference when you run it:

<!DOCTYPE html>
<html lang="en-US">
<head><title>Array Testing</title></head>
<body>
<script>
function benchTest() {
    var start;
    var end;
    var time;
    var i;

    document.writeln('<p>Starting method 1 at ' + Date() + '</p>');
    document.writeln('<ul>');
    for (i=0; i<10; i++) {
        start = Date.now();
        method1();
        end = Date.now();
        time = end - start;
        document.writeln('<li>Execution time: ' + time + '</li>');
    }
    document.writeln('</ul>');

    document.writeln('<p>Starting method 2 at ' + Date() + '</p>');
    document.writeln('<ul>');
    for (i=0; i<10; i++) {
        start = Date.now();
        method2();
        end = Date.now();
        time = end - start;
        document.writeln('<li>Execution time: ' + time + '</li>');
    }
    document.writeln('</ul>');
}

function method1() {
    var data = [];
    var i;
    for (i = 0; i < 500000; i++)
        data.push("Test value " + i);
}

function method2() {
    var data = (500000);
    var i;
    var ndx = 0;
    for (i = 0; i < 500000; i++)
        data[ndx++] = "Test value " + i;
}
benchTest();
</script>
</body>
</html>

Open in new window

Julian Hansen

What does your data look like?

Jay Roy

ASKER

thanks,

CustomerDataNew.data[0].data is a array of abjects
Object contains
id:
name:
clusterId:

ASKER CERTIFIED SOLUTION

Alexandre Simões

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jay Roy

ASKER

hi dsacker
I made this change

This was my old code

var productData = [];
debugger;
for(i = 0; i < CustomerDataNew.data[0].data.length; i++){
if( customerGroupItem == CustomerDataNew.data[0].data[i].clusterId){
productData.push(CustomerDataNew.data[0].data[i]);
}

Open in new window

This is my new code (Complete code which populates my Grid)

Ext.each(customerGroupItems, function(customerGroupItem, index) {  
	 
var productData = [CustomerDataNew.data[0].data.length];	 //CustomerDataNew.data[0].data.length is 5000			
var ndx = 0;
//debugger;
for(i = 0; i < CustomerDataNew.data[0].data.length; i++){//looping through touching every element , linear time performance
if( customerGroupItem == CustomerDataNew.data[0].data[i].clusterId){
//productData.push(mandateDetailClusterDataNew.data[0].data[i]);
productData[ndx++] = CustomerDataNew.data[0].data[i];
}
}
Ext.getCmp('PROD'+customerGroupItem).getStore().setProxy({   
	type : 'memory',
	data : productData,  //productData is used here to for the GRID
	reader : {
		type : 'json',
		root : 'data',
		totalProperty : 'total',
		successProperty : 'success'
}
});
				
});

Open in new window

But it doesnt look like i see a big difference.
My code looks fine right?

thanks

Alexandre Simões

Try my suggestion...

dsacker

Yes it looks good, but you may need to make your array fixed:

var variable = new Array(500000);

or

var variable = (500000);

And like Alexandre Simões said, coming both his recommendation with fixed-array, will probably get you as fast as you're gonna get.

Jay Roy

ASKER

thanks guys
I still dont see much improvement, it takes 20 seconds to load the grid. After trying above sugessions i see maybe a benefit of 2 or 3 seconds.
Will using indexOf() help in anyway?

thanks

dsacker

If you were able to join all your array into one long string delimited perhaps with pipes (|), then use:

oneLongJoinedString.indexOf('|' + customerGroupItem + '|')

... you might achieve faster results.

Alexandre Simões

20 seconds to run this code?
- Are you sure that it's here that it's taking time?
Can you try measuring my code's execution time?

var productData = [];
    debugger;

var start = new Date() *1;
var data = CustomerDataNew.data[0].data;
for (i = 0; i < data.length; i++) {
    var item = data[i];
    if (customerGroupItem == item.clusterId) {
        productData.push(item);
    }
}
var end = new Date() *1;
console.log('Elapsed time: ' + (end-start));

Open in new window

How long did it take? (check in the console, the time will be in milliseconds)

- Are you doing anything else inside or after that loop?
- What machine are you using?
- Which browser?

Jay Roy

ASKER

hi,
You were right, Elapsed time is < 2 in all cases. the time taken is somewhere else.
Thanks all for your help.