Loop through an array if it finds a key, skip the index for that key, but eventually want to go back and add that index skipping the other keys

Issue

So this is kind of hard to explain, but basically trying to make a more efficient way of doing the below code…

products.forEach(function(item, index){
    if(item.sale == false ) {
        nonSaleItems += createEl(item);
    } else {
        saleItems += createEl(item);
    }
});

items.innerHTML += nonSaleItems;
items.innerHTML += saleItems;

products is an array of objects where one of the keys is "sale" and is "false" or "true" for "sale". The idea behind this is to post all the none sale items first, then the sale items goes second – hence the innerHTML of nonSaleItems first, THEN saleItems gets added second.

This code works perfectly, but I feel like there has to be a more efficient / less verbose way to do it instead of two variables of nonSaleItems and saleItems and then two innterHTMLs.

Just curious if anyone had better ideas on how to simplify this or have it better?

Solution

You’re already doing one loop through all the products, which is a) necessary, and b) about as efficient as it gets.

The best you can do is make your code less verbose. In this case I’m using a ternary to decide which whether to use saleItems or nonSaleItems as the lvalue for += createEl(...):

products.forEach(function(item, index){
    ( item.sale ? saleItems : nonSaleItems ) += createEl(item);
});

items.innerHTML += nonSaleItems;
items.innerHTML += saleItems;

Answered By – kmoser

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.