jQuery using .each with conditions to build a separate array() result

Dear Experts,

I am iterating through a table with .each. On each iteration, I have a condition. If the condition is met, I want the resulting row to be stored in an array to be returned, otherwise I want to skip the row. The code snippet below shows what I am doing.

Example:

I have 100 rows of the original table being sent to the function, of which, 50 satisfy the "if" condition. The problem is, the return is sending back 50 nulls, and 50 correct elements. I don't understand why I am getting the nulls? I only want the 50 that satisfied the condition.

Please consider the following:

function storePaymentTableValues(starting_payment_number) {

    var tableData = new Array();

    $('#tbl_payment_schedule tr').each(function(row, tr) {
        
        if(Number($(tr).find('td:eq(0)').text()) >= Number(starting_payment_number)) {
            
            tableData[row] = {
                "PaymentNumber"              : $(tr).find('td:eq(0)').text(),
                "PaymentMethodID"            : $(tr).find('td:eq(1)').text(),
                "PaymentDueDate"             : $(tr).find('td:eq(2)').text(),
                "PaymentDueAmount"           : $(tr).find('td:eq(3)').text(),
                "PaymentReceivedDate"        : $(tr).find('td:eq(4)').text(),        
                "PaymentReceivedAmount"      : $(tr).find('td:eq(5)').text(),        
                "PaymentConfirmationID"      : $(tr).find('td:eq(6)').text(),        
                "AmountAllocatedToPrinciple" : $(tr).find('td:eq(7)').text(),        
                "Memo"                       : $(tr).find('td:eq(8)').text(),
            }
        }
    
    }); 

    return tableData;
}

Open in new window


Aside from the nulls being included, this is doing exactly as expected. How/why is the condition being ignored and the "records" that don't qualify getting included as null?

Thank you in advance for you help.

Best,
Mike
mwheeler_fsdAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mwheeler_fsdAuthor Commented:
Experts:

Here is an actual result where the "starting_payment_number" is 85 (out of 89). Result looks great, but how am I getting all the nulls that should simply be skipped?

There are 84 nulls representing the records I intended to skip, followed by 85 through 89 which I want in the result.

[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,{"PaymentNumber":"85","PaymentMethodID":"-1","PaymentDueDate":"2015-09-28","PaymentDueAmount":"206","PaymentReceivedDate":"null","PaymentReceivedAmount":"null","PaymentConfirmationID":"null","AmountAllocatedToPrinciple":"null","Memo":"null"},{"PaymentNumber":"86","PaymentMethodID":"-1","PaymentDueDate":"2015-09-29","PaymentDueAmount":"206","PaymentReceivedDate":"null","PaymentReceivedAmount":"null","PaymentConfirmationID":"null","AmountAllocatedToPrinciple":"null","Memo":"null"},{"PaymentNumber":"87","PaymentMethodID":"-1","PaymentDueDate":"2015-09-30","PaymentDueAmount":"206","PaymentReceivedDate":"null","PaymentReceivedAmount":"null","PaymentConfirmationID":"null","AmountAllocatedToPrinciple":"null","Memo":"null"},{"PaymentNumber":"88","PaymentMethodID":"-1","PaymentDueDate":"2015-10-01","PaymentDueAmount":"206","PaymentReceivedDate":"null","PaymentReceivedAmount":"null","PaymentConfirmationID":"null","AmountAllocatedToPrinciple":"null","Memo":"null"},{"PaymentNumber":"89","PaymentMethodID":"-1","PaymentDueDate":"2015-10-02","PaymentDueAmount":"72","PaymentReceivedDate":"null","PaymentReceivedAmount":"null","PaymentConfirmationID":"null","AmountAllocatedToPrinciple":"null","Memo":"null"}]

Thanks again,
--Mike
0
Hammadh Abdul RahmanCommented:
Hi Mike,

Below code changes should solve the issue. The original code was skipping rows in 'tableData' and for example it skipped 84 rows in your sample result and started storing at 85th row.

function storePaymentTableValues(starting_payment_number) {

    var tableData = new Array();
    var tableDataRow=0;

    $('#tbl_payment_schedule tr').each(function(row, tr) {
        
        if(Number($(tr).find('td:eq(0)').text()) >= Number(starting_payment_number)) {

            tableData[tableDataRow] = {
                "PaymentNumber"              : $(tr).find('td:eq(0)').text(),
                "PaymentMethodID"            : $(tr).find('td:eq(1)').text(),
                "PaymentDueDate"             : $(tr).find('td:eq(2)').text(),
                "PaymentDueAmount"           : $(tr).find('td:eq(3)').text(),
                "PaymentReceivedDate"        : $(tr).find('td:eq(4)').text(),        
                "PaymentReceivedAmount"      : $(tr).find('td:eq(5)').text(),        
                "PaymentConfirmationID"      : $(tr).find('td:eq(6)').text(),        
                "AmountAllocatedToPrinciple" : $(tr).find('td:eq(7)').text(),        
                "Memo"                       : $(tr).find('td:eq(8)').text(),
            }
            tableDataRow++;
        }
    
    }); 

    return tableData;
}

Open in new window

0
Julian HansenCommented:
Take a look at this article for an in depth discussion of Arrays in JavaScript
http://www.i-programmer.info/programming/javascript/1441-javascript-data-structures-the-associative-array.html?start=1

By default all arrays in JS are associative - however the Array() object is a special case for dealing with indexed arrays. Consider the following code
var x = Array();
x[1] = 5;
x[3] = 10;
console.log(x);

Open in new window

The output is
 [undefined, 5, undefined, 10]

Open in new window

In other words the Array object fills in the missing indices for you - as it is primarily designed to be an indexed array.
Now consider the following code
var x = Object();
x[1] = 5;
x[3] = 10;
console.log(x);

Open in new window

The output is
Object { 1=5,  3=10}

Open in new window

Note the absence of the nulls - why because the Object structure is associative and works on key value pairs not on a contiguous index.

NB with the Object structure, if you have
x = Object();
x['car'] = 'VW';

Open in new window

Then
x[0] is not defined in other words - you can't index into an associative array.

In your case simply change the
var tableData = new Array();

Open in new window

To
var tableData = new Object();

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mwheeler_fsdAuthor Commented:
Dear Experts:

This is always a tough situation, but I feel compelled to award points to both solutions. Hammadh, your solution worked perfectly, and makes sense, now that I have the understanding of how JavaScript handles these arrays based on Julian's explanation, and background foundation.

With that said, I thank both of you. Not only did this solve for my immediate problem, but also provides excellent information I will use in the future.

Best regards,
--Mike
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.