javascript - create array with foreach loop through table

Question

i have a form with table like this:

<table id="preview">
<tbody>
<tr>
<td>01/01/2010</td>
<td>Credit</td>
<td>1000</td>
</tr>
<tr>
<td>01/05/2010</td>
<td>Debit</td>
<td>200</td>
</tr>
<tr>
<td>01/09/2010</td>
<td>Debit</td>
<td>400</td>
</tr>
<tr>
<td>01/11/2010</td>
<td>Debit</td>
<td>100</td>
</tr>
</tbody>
</table>

Now I need to create an array to send (ajax/php) like this:

$ajaxArray = array(   0 => array(From   => "01/01/2010",  //1st td of the 1st Row
                                    To     => "01/05/2010",  //1st td of the 2nd Row
                                    Type   => "Credit",
                                    Amount => 1000.00),
                         1 => array(From   => "01/05/2010",  //1st td of the 2nd Row
                                    To     => "01/09/2010",  //1st td of the 3th Row
                                    Type   => "Debit",
                                    Amount => 200.00),
                         2 => array(From   => "01/09/2010",  //1st td of the 3th Row
                                    To     => "01/11/2010",  //1st td of the 4th Row
                                    Type   => "Debit",
                                    Amount => 400.00),
                         3 => array(From   => "01/11/2010",  //1st td of the 4th Row
                                    To     => "01/01/2012",  //Value in $last_date var
                                    Type   => "Debit",
                                    Amount => 100.00)
        );

I tried with this code:

 $('#preview > tbody  > tr').each(function() {
            var from = $('td:eq(0) ', this).text();
            var type = $('td:eq(1) ', this).text();
            var amount = $('td:eq(2) ', this).text();
            ajaxArray.push({
                From: from,
                Type: type,
                Amount: amount
            });
        });

As you can see i can't get the "To" date value. The "To" date value is the date contained in the 1st TD of the Next row except for the last Row, where this value is in the $last_date variable.

Thanks in advance

Answer 1

This should do it Fiddle Demo

var array = [];
var rows  = $("#preview tbody tr");

$.each( rows, function(index, row) {   
    var columns = $(row).find("td");
    
    array[index] = {};             
    array[index].from = columns[0].innerHTML;    
    array[index].type = columns[1].innerHTML;
    array[index].amount = columns[2].innerHTML;
    
    if(index > 0){
        array[index - 1].to = columns[0].innerHTML;
    }      
});
    
$("#result").text(JSON.stringify(array));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="preview">
<tbody>
<tr>
<td>01/01/2010</td>
<td>Credit</td>
<td>1000</td>
</tr>
<tr>
<td>01/05/2010</td>
<td>Debit</td>
<td>200</td>
</tr>
<tr>
<td>01/09/2010</td>
<td>Debit</td>
<td>400</td>
</tr>
<tr>
<td>01/11/2010</td>
<td>Debit</td>
<td>100</td>
</tr>
</tbody>
</table>

<hr/>
    
<pre id="result"></pre>