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.
royjaydAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dsackerContract ERP Admin/ConsultantCommented:
If there is any way you can know the maximum size of your array ahead of time, a fixed array is faster:
// var productData = [];
var productData = (5000);
var ndx = 0;
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]);
        productData[ndx++] = CustomerDataNew.data[0].data[i];
    }
}

Open in new window

If you are able to use a fixed-length array, rather than a pop, something like this may be faster, too:
var last = productData[--ndx];

Open in new window

dsackerContract ERP Admin/ConsultantCommented:
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 HansenCommented:
What does your data look like?
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

royjaydAuthor Commented:
thanks,


CustomerDataNew.data[0].data is a array of abjects
Object contains
id:
name:
clusterId:
Alexandre SimõesManager / Technology SpecialistCommented:
Hi mate,

the biggest improvement I can see there that you can do is to reduce the depth of the main used properties.
Only by using the following code I believe you'll see a big improvement:
var productData = [];
    debugger;

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

Open in new window

Basically, always keep in mind not to use more than once the same property or method that is several level deep into a namespace. In your case you're even mixing that with arrays.

On a powerful machine and good browser you might not feel it but once you run thins on a not so good computer and old browser, that's when you start having performance issues.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
royjaydAuthor Commented:
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õesManager / Technology SpecialistCommented:
Try my suggestion...
dsackerContract ERP Admin/ConsultantCommented:
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.
royjaydAuthor Commented:
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
dsackerContract ERP Admin/ConsultantCommented:
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õesManager / Technology SpecialistCommented:
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?
royjaydAuthor Commented:
hi,
You were right, Elapsed time is < 2 in all cases. the time taken is somewhere else.
Thanks all for your help.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.