Jquery – each get value, Find difference and convert to array

Used below HTML & JS code to get each value of base currency and member currency.

Need to get Memberprice value by finding a difference between base currency – member currency. Some times member-price will not exist. If condition to check and remove that base-currency from display. Then convert memberprice each value in array.

But, below code.. str1 & str2 outputs are coming as expected. But, memberprice difference get only first value. Not all.

Please help to guide and get a output in array format of extracted value like below based on example HTML shared.

[275, 258, 365, 348, 460] — 500 will be not there as there is no member-price div

var str1 = "";
var str2 = "";
var memberprice = "";
var arrayKeys = [];
var titleKeys = [];
var title = "";
$('.list-item').each(function(){
  str1 += $(this).find('.right-container .base-currency .price').attr('data-base-price') + ",";
  str2 += $(this).find('.right-container .member-currency .price').attr('data-base-price') + ",";
  console.log('str1: ', str1);
  console.log('str2: ', str2);

  memberprice += str1 - str2;
  console.log(memberprice);

  title += $(this).find('.left-container h3').html() + ",";

  // need to insert these values in array get memberprice -> str1 - str2. If membercurrency exists minus. Other display only basecurrency.
  //output have to be like [275, 258, 365, 348, 500, 460]
  arrayKeys.push(memberprice);

  //Title in array 
  titleKeys.push(title);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-item">
    <div class="left-container">
        <h3>Product Title 1</h3>
        <a href="#">Title 1 Link</a>
    </div>
    <div class="right-container">
        <div class="price-list">
            <div class="base-currency">
                <div class"price" data-base-currency='300'>300 USD</div>
            </div>
            <div class="member-currency">
                <div class"price" data-base-currency='25'>25 USD</div>
            </div>
        </div>
        <div class="price-list">
            <div class="base-currency">
                <div class"price" data-base-currency='280'>280 USD</div>
            </div>
            <div class="member-currency">
                <div class"price" data-base-currency='22'>22 USD</div>
            </div>
        </div>
    </div>
</div>

<div class="list-item">
    <div class="left-container">
        <h3>Product Title 2</h3>
        <a href="#">Title 2 Link</a>
    </div>
    <div class="right-container">
        <div class="price-list">
            <div class="base-currency">
                <div class"price" data-base-currency='400'>400 USD</div>
            </div>
            <div class="member-currency">
                <div class"price" data-base-currency='35'>35 USD</div>
            </div>
        </div>
        <div class="price-list">
            <div class="base-currency">
                <div class"price" data-base-currency='380'>380 USD</div>
            </div>
            <div class="member-currency">
                <div class"price" data-base-currency='32'>32 USD</div>
            </div>
        </div>
    </div>
</div>
<div class="list-item">
    <div class="left-container">
        <h3>Product Title 3</h3>
        <a href="#">Title 3 Link</a>
    </div>
    <div class="right-container">
        <div class="price-list">
            <div class="base-currency">
                <div class"price" data-base-currency='500'>500 USD</div>
            </div>
        </div>
        <div class="price-list">
            <div class="base-currency">
                <div class"price" data-base-currency='470'>470 USD</div>
            </div>
            <div class="member-currency">
                <div class"price" data-base-currency='10'>10 USD</div>
            </div>
        </div>
    </div>
</div>

Answer

You can loop through price-list div and get value from currency and base using find('.base-currency .price') same for other then subtract that values and add them inside arrays . Also , you need check if title already exist inside title array to avoid any duplicate.

Demo Code :

var str1 = "";
var str2 = "";
var memberprice = "";
var arrayKeys = [];
var titleKeys = [];
var title = "";
//loop through price list divss
$('.price-list').each(function() {
  //get value from base & member if exist else take 0
  str1 = ($(this).find('.base-currency .price').attr('data-base-currency')) ? parseInt($(this).find('.base-currency .price').attr('data-base-currency')) : 0;
  str2 = ($(this).find('.member-currency .price').attr('data-base-currency')) ? parseInt($(this).find('.member-currency .price').attr('data-base-currency')) : 0;
  console.log('str1: ', str1);
  console.log('str2: ', str2);
  memberprice = str1 - str2;
  console.log(memberprice);
  //get title
  title = $(this).closest(".list-item").find('.left-container h3').html();
  //check if member is not 0 (means not exist..) 
  if (str2 != 0) {
    arrayKeys.push(memberprice);
  }
  //check if prduct name exist in title array
  if ($.inArray(title, titleKeys) === -1) {
    titleKeys.push(title); //push same
  }
});

console.log(titleKeys)
console.log(arrayKeys)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-item">
  <div class="left-container">
    <h3>Product Title 1</h3>
    <a href="#">Title 1 Link</a>
  </div>
  <div class="right-container">
    <div class="price-list">
      <div class="base-currency">
        <div class="price" data-base-currency='300'>300 USD</div>
      </div>
      <div class="member-currency">
        <div class="price" data-base-currency='25'>25 USD</div>
      </div>
    </div>
    <div class="price-list">
      <div class="base-currency">
        <div class="price" data-base-currency='280'>280 USD</div>
      </div>
      <div class="member-currency">
        <div class="price" data-base-currency='22'>22 USD</div>
      </div>
    </div>
  </div>
</div>

<div class="list-item">
  <div class="left-container">
    <h3>Product Title 2</h3>
    <a href="#">Title 2 Link</a>
  </div>
  <div class="right-container">
    <div class="price-list">
      <div class="base-currency">
        <div class="price" data-base-currency='400'>400 USD</div>
      </div>
      <div class="member-currency">
        <div class="price" data-base-currency='35'>35 USD</div>
      </div>
    </div>
    <div class="price-list">
      <div class="base-currency">
        <div class="price" data-base-currency='380'>380 USD</div>
      </div>
      <div class="member-currency">
        <div class="price" data-base-currency='32'>32 USD</div>
      </div>
    </div>
  </div>
</div>
<div class="list-item">
  <div class="left-container">
    <h3>Product Title 3</h3>
    <a href="#">Title 3 Link</a>
  </div>
  <div class="right-container">
    <div class="price-list">
      <div class="base-currency">
        <div class="price" data-base-currency='500'>500 USD</div>
      </div>
    </div>
    <div class="price-list">
      <div class="base-currency">
        <div class="price" data-base-currency='470'>470 USD</div>
      </div>
      <div class="member-currency">
        <div class="price" data-base-currency='10'>10 USD</div>
      </div>
    </div>
  </div>
</div>