Javascript array of objects length doesn't match number of objects

Question

Have a Javascript array that I'm creating and pushing objects to :

checkedAPBoxes.each( function() {
    let APTempObj = {};
    let apSequence = $(this).data('sequence');
    let arDropdownSequenceValue = $('#billingRelaseSelectTiedAR' + $(this).data('sequence')).val();

    APTempObj.apSequenceToRelease = apSequence;
    APTempObj.relatedARSequence = arDropdownSequenceValue;
    APArray.push(APTempObj);

    //check if current invoice is comcheck
    const url = '/cfc/shipments/ap/ShipmentAPAPI.cfc';
    const data = {
        method: 'isOriginalComcheckInvoice',
        shipmentID: shipmentID,
        sequence: apSequence,
        returnformat: 'JSON'
    };

    Edge.Utility.Ajax.get(url, data)
    .then(function(result) {
        if (result == true){
            //add related comcheck invoices to batch
            const comcheckURL = '/cfc/shipments/ap/ShipmentAPAPI.cfc';
            const comcheckData = {
                method: 'getRelatedComcheckInvoices',
                shipmentID: shipmentID,
                sequence: apSequence,
                returnformat: 'json'
            };

            Edge.Utility.Ajax.get(comcheckURL, comcheckData)
            .then(function(resultAPs) {
                for (var i = 0; i < resultAPs.length; i++) {
                    let relatedAPTempObj = {};
                    relatedAPTempObj.apSequenceToRelease = parseInt(resultAPs[i]);
                    relatedAPTempObj.relatedARSequence = arDropdownSequenceValue;
                     APArray.push(relatedAPTempObj);
                }
            }).catch(function(xhr) {
                console.error(xhr);
                $uiButton.eui('button', 'complete');
                $uiButton.show();
            });
        }
    }).catch(function(xhr) {
        console.error(xhr);
        $uiButton.eui('button', 'complete');
        $uiButton.show();
    });
});

But logging the array shows me a length of 5 yet only 3 objects in there:

enter image description here

Looping over the array based on length only prints the first three elements thought, even though length shows 5.

        for (var i = 0; i < APArray.length; i++) {
            console.log('typeof: ' + typeof(APArray[i]));
            console.log(APArray[i]);
        }

It seems like you are accessing APArray before the network response was received. Array[3] in the first line indicates that at the time the array is logged it only has 3 elements. By the time you expand the log it has 5. Hover over the i next to Array[3]. — Felix Kling
– Felix Kling, Commented Sep 12, 2017 at 17:45

BILAL AHMAD · Accepted Answer · 2017-09-12 18:00:46Z

There is a difference between ajax.then(callback) and ajax.done(callback). "then" function returns a new promise every time it receives a data. That is why when the first batch of output is received, i.e. 3 objects it executes the callback function and output 3 objects with a promise that later on receives 2 more objects.

So the resolution is that you use "done" function instead of "then". In that case there will be only one callback in case of complete success. You will receive 5 objects in that case. Please refer to the updated code below.

checkedAPBoxes.each( function() {
let APTempObj = {};
let apSequence = $(this).data('sequence');
let arDropdownSequenceValue = $('#billingRelaseSelectTiedAR' + $(this).data('sequence')).val();

APTempObj.apSequenceToRelease = apSequence;
APTempObj.relatedARSequence = arDropdownSequenceValue;
APArray.push(APTempObj);

//check if current invoice is comcheck
const url = '/cfc/shipments/ap/ShipmentAPAPI.cfc';
const data = {
    method: 'isOriginalComcheckInvoice',
    shipmentID: shipmentID,
    sequence: apSequence,
    returnformat: 'JSON'
};

Edge.Utility.Ajax.get(url, data)
.done(function(result) {
    if (result == true){
        //add related comcheck invoices to batch
        const comcheckURL = '/cfc/shipments/ap/ShipmentAPAPI.cfc';
        const comcheckData = {
            method: 'getRelatedComcheckInvoices',
            shipmentID: shipmentID,
            sequence: apSequence,
            returnformat: 'json'
        };

        Edge.Utility.Ajax.get(comcheckURL, comcheckData)
        .done(function(resultAPs) {
            for (var i = 0; i < resultAPs.length; i++) {
                let relatedAPTempObj = {};
                relatedAPTempObj.apSequenceToRelease = parseInt(resultAPs[i]);
                relatedAPTempObj.relatedARSequence = arDropdownSequenceValue;
                 APArray.push(relatedAPTempObj);
            }
        }).catch(function(xhr) {
            console.error(xhr);
            $uiButton.eui('button', 'complete');
            $uiButton.show();
        });
    }
}).catch(function(xhr) {
    console.error(xhr);
    $uiButton.eui('button', 'complete');
    $uiButton.show();

.done is not a standard promise method. What makes you think that Edge.Utility.Ajax.get(...) provides such a method?

Collectives™ on Stack Overflow

Javascript array of objects length doesn't match number of objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related