Looping through and storing each table row td element value as array of objects

Question

I have a table that dynamically calculates and create new row. Here is a snippet of the:

  <table>
  <tr class="purchase_schedule_table">
      <td><input type="text" name="purchase_place" class="purchase_place_info" style="width: 90%;" ></td>
      <td><input type="text" name="main_products_purch" style="width: 90%;" class="main_products_purch_info" ></td>
      <td><input type="number" name="frequency" style="width: 90%;" class="frequency" ></td>
      <td><input type="number" name="low" style="width: 90%;" class="product_low" ></td>
      <td><input type="number" name="high" style="width: 90%;" class="product_high" ></td>
      <td><input type="number" name="average" style="width: 90%;" class="product_average" disabled ></td>
      <td>
        <div class = "input-group" id="addrow">
          <input type="number" name="product_total" style="width: 90%;" class="product_total"  disabled>
          <span class = "input-group-addon" style="width:1%; background-color:#786bae;border-color:#786bae;">
            <a href="#">
              <span style="color:#FFFFFF;font-size:9px;line-height: 1.5;border-radius:0 !important;" class="glyphicon glyphicon-plus addrow" aria-hidden="true"></span>
            </a>
          </span>
        </div>
      </td>
    </tr>
  </table>

Here is a snippet of jquery code to calculate the values:

//calculate purchase schedule monthly total
function calculatePurchaseScheduleMonthlyTotal(){
   var total_sum = 0;

  $('.product_total').each(function () {
     var value = $(this).val();
     total_sum = parseInt(total_sum) + parseInt(value);
  });

   $('.total_sum').val(total_sum);
};

  //calculate purchase schedule
 function calculatePurchaseSchedule(ObjRow) {
    var low = 0;
    var high = 0;
    var average = 0;
    var frequency = 0;
    var total = 0;

    var total_sum = 0;

    frequency = ($(ObjRow).find('.frequency').val() == "") ? 0 :      $(ObjRow).find('.frequency').val();

      high = ($(ObjRow).find('.product_high').val() == "") ? 0 : $(ObjRow).find('.product_high').val();

     low = ($(ObjRow).find('.product_low').val() == "") ? 0 : $(ObjRow).find('.product_low').val();

     average = (parseInt(high) + parseInt(low)) / 2;
     total = average * frequency;

     $(ObjRow).find('.product_total').val(total);
    $(ObjRow).find('.product_average').val(average);


    calculatePurchaseScheduleMonthlyTotal();
};

Here is also a snippet of the code that is use to trigger the calculation:

$(document).on('focusout','input[type=number]',function () {
       calculatePurchaseSchedule($(this).closest('tr'));
       saveData();
  });

Here is the code for adding a table row dynamically:

$('#addrow').click(function (e) {
   e.preventDefault();

  var purchase_schedule_row = '<tr class="purchase_schedule_table"><td>  <input type="text" name="purchase_place" class="purchase_place" style="width: 90%;"></td><td><input type="text" name="main_products_purch" style="width: 90%;" class="main_products_purch"></td><td><input type="number" name="frequency" style="width: 90%;" class="frequency"></td><td><input type="number" name="low" style="width: 90%;" class="product_low"></td> <td><input type="number" name="high" style="width: 90%;" class="product_high"></td> <td><input type="number" name="average" style="width: 90%;" class="product_average" disabled></td><td> <div class = "input-group" id="addrow">  <input type="number" name="total" style="width: 90%;" class="product_total" disabled><span class = "input-group-addon" style="width:1%; background-color:#ec6d65;border-color:#ec6d65;"><a href="#"> <span style="color:#FFFFFF;font-size:9px;line-height: 1.5;border-radius:0 !important;" class="glyphicon glyphicon-minus deleterow" aria-hidden="true"></span></a></span></div></td></tr>';

 $('#purchaseScheduleTable').append(purchase_schedule_row);
});

What I want to do is to store each table row td element value as a array of objects. I have tried doing so in the following code:

  var purchase_place;
  var main_products_purch;
  var frequency;
  var product_low;
  var product_high;
  var product_average;
  var product_total;
  var product_total_sum;
  var purchase_schedule_table = [];
  var purchase_schedule_data = {};

  var count = 1;
 $('.purchase_schedule_table').each(function(){
    $(this).find('.product_total').each(function () {
       product_total =  $(this).find('.product_total').val();
       console.log(product_total);
       purchase_schedule_data.product_total = product_total;
    });
    purchase_schedule_table.push(purchase_schedule_data);
 });
 console.log(purchase_schedule_table);

For example, the end result should be like this:

      [
         {purchase_place:  'purchase_place', main_products_purch : 'main_products_purch', frequency:'frequency', product_average: 'product_averager'}
        {purchase_place:  'purchase_place', main_products_purch : 'main_products_purch', frequency:'frequency', product_average: 'product_averager'}
      ]

What am I doing wrong? Thanks in advance.

Do you want to get only product total? Can show the structure of your object? — Ibrahim Khan
– Ibrahim Khan, Commented Feb 12, 2016 at 18:10
I do not want product total alone, I want to the get the other td element values @Azim — newbieDev
– newbieDev, Commented Feb 12, 2016 at 18:17

Ibrahim Khan · Accepted Answer · 2016-02-12 18:31:49Z

3

Iterate through each tr with class purchase_schedule_table and then each td in it, make an object and push it in a an array like following.

var arr = [];
$('.purchase_schedule_table').each(function () {
    var obj = {};
    $(this).find('td').each(function () {            
        var input = $(this).find('input')[0];
        obj[input.name] = input.value;
    });
    arr.push(obj);
})

console.log(arr)

answered Feb 12, 2016 at 18:31

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Looping through and storing each table row td element value as array of objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related