Compare old and new price for each element if any is equal or not

Question

I'm looking for a help with my code to compare prices between old and new price.

My code doesn't work as it should, I'm trying to compare two arrays one is for old price and one for new price. All the time when trying to check if old price is equal to new price it doesn't work. It logs properly all prices but if trying to compare them nothing happens. Besides that when trying to check if old price is less or equal to new price it works but not as expected. It applies to every item, even to price where old is higher than new one.

I created quick fiddle with my code and appreciate any pointers.

var NewPArr = [];
var NewP = $('.item .price_new').each(function() {  
    NewPArr.push($(this).text());
});

var OldPArr = [];
var OldP = $('.item .price_old').each(function() {  
    OldPArr.push($(this).text());
});

 if ( OldPArr == NewPArr ) {
console.log('it works');
 //   $('.item .price_old').hide();
    $('.item .price_old').addClass('test');
 }


console.log(NewPArr); 
console.log(OldPArr);

.elements {
  display: block;
}

.item {
  width: 250px;
  height: 50px;
}
.title {
  display:block;
  font-weight: bold;
}

.price_old {
  text-decoration: line-through;
}

.price_new {
  font-weight: bold;
}

.test {
  color: red;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="elements">

<div class="item">
<span class="title">Title 1</span>
<span class="price_old">14.99</span>
<span class="price_new">14.99</span>
</div>

<div class="item">
<span class="title">Title 2</span>
<span class="price_old">0</span>
<span class="price_new">9.99</span>
</div>

<div class="item">
<span class="title">Title 3</span>
<span class="price_old">12.99</span>
<span class="price_new">14.99</span>
</div>

<div class="item">
<span class="title">Title 4</span>
<span class="price_old">18.99</span>
<span class="price_new">14.99</span>
</div>

<div class="item">
<span class="title">Title 5</span>
<span class="price_old">10.99</span>
<span class="price_new">10.99</span>
</div>

<div class="item">
<span class="title">Title 6</span>
<span class="price_old">9.99</span>
<span class="price_new">9.99</span>
</div>

</div>

https://jsfiddle.net/Robertzoone/sp5h1b96/

Does this answer your question? [How to compare arrays in JavaScript?](https://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript) — kmoser, Feb 01 '22 at 16:12
FYI, [jQuery has a `map` method](https://api.jquery.com/map/) which would allow you to create those arrays in one statement... — Heretic Monkey, Feb 01 '22 at 16:29

Mohamed-Yousef · Accepted Answer · 2022-02-01T16:46:41.103

No need for arrays ,Working with data- attribute will make it much easier <div class="item" data-price_new="" data-price_old="">

$(document).ready(function(){
  $('.item').each(function(){
    let $this = $(this),
        price_old = +$this.data('price_old'),
        price_new = +$this.data('price_new');

    if(price_old > price_new){
      console.log($this.find('.title').text()+'--- Old is Bigger');
    }else if(price_old === price_new){
      console.log($this.find('.title').text()+'--- Equal');
    }else{
      console.log($this.find('.title').text()+'--- New is Bigger');
    }
    
  });
});

.elements {
  display: block;
}

.item {
  width: 250px;
  height: 50px;
}
.title {
  display:block;
  font-weight: bold;
}

.price_old {
  text-decoration: line-through;
}

.price_new {
  font-weight: bold;
}

.test {
  color: red;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="elements">

<div class="item" data-price_old="14.99" data-price_new="14.99">
<span class="title">Title 1</span>
<span class="price_old">14.99</span>
<span class="price_new">14.99</span>
</div>

<div class="item" data-price_old="0" data-price_new="9.99">>
<span class="title">Title 2</span>
<span class="price_old">0</span>
<span class="price_new">9.99</span>
</div>

<div class="item" data-price_old="12.99" data-price_new="14.99">
<span class="title">Title 3</span>
<span class="price_old">12.99</span>
<span class="price_new">14.99</span>
</div>

<div class="item" data-price_old="18.99" data-price_new="14.99">
<span class="title">Title 4</span>
<span class="price_old">18.99</span>
<span class="price_new">14.99</span>
</div>

<div class="item" data-price_old="10.99" data-price_new="10.99">
<span class="title">Title 5</span>
<span class="price_old">10.99</span>
<span class="price_new">10.99</span>
</div>

<div class="item" data-price_old="9.99" data-price_new="9.99">
<span class="title">Title 6</span>
<span class="price_old">9.99</span>
<span class="price_new">9.99</span>
</div>

</div>

Then ..You can easily get the price_old , price_new element by using

let price_old_element = $this.find('.price_old'),
    price_new_element = $this.find('.price_new');
// use it like this
price_old_element.hide();
price_new_element.addClass('test');

Wow thank you for a great solution. With use of data attributes this is even clearer than before. I've been thinking of using data-attributes but decide this might be better. Thank you for your help. Although I don't get one. when I added inside if equal statement code to add class "test" it's been added to everything even to price where old is bigger compared to current price. — Robert, Feb 01 '22 at 16:59
Sorry my bad all works perfectly I did a typo :) Just adjusted whole code to my needs and works perfectly. Thank you for your help. — Robert, Feb 01 '22 at 17:13

JaivBhup · Answer 2 · 2022-02-01T17:16:21.853

To compare 2 arrays you have to check each and every element in the array:

 var NewPArr = [];
    var NewP = $('.item .price_new').each(function() {  
        NewPArr.push($(this).text());
    });
    
    var OldPArr = [];
    var OldP = $('.item .price_old').each(function() {  
        OldPArr.push($(this).text());
    });

    
    function compareArrays(a1,a2){
       if(!a1 instanceof Array || !a2 instanceof Array) return false;
       if(a1.length != a2.length) return false;
       for(let i = 0; i<a1.length;i++){
          // Check for 2d array
          if(a1[i] instanceof Array){
            if(a2[i] instanceof Array){
                for(let j = 0; j<a1[i].length;j++){
                    if(a1[i][j]!=a2[i][j]){
                        return false;
                    }
                }
            }else{
              return false;
             }
          }else{
            if(a1[i]!=a2[i]){
                return false;
            }
          }
       }
       return true;
     }

     if (compareArrays(OldPArr,NewPArr)) {
    console.log('it works');
     //   $('.item .price_old').hide();
        $('.item .price_old').addClass('test');
     }
    
    
    console.log(NewPArr); 
    console.log(OldPArr);

Also to compare the prices you can loop through each and every element and compare the values of OldPArr and NewPArr.

Compare old and new price for each element if any is equal or not

2 Answers2