Chrome saying "cannot read property of undefined"...even though it does

Question

Have no idea what's going on.

Taking objects from $.ajax success msg, storing them in new array to pass to plugin, plugin uses the data yet reports cannot use property 'ID' in my title above.

Stops at end of for loop and points to first line of for loop in console. It clones with the data and everything. Nothing after the for works.

Snippet in $.ajax()

var suppliers = [];
for(var i=0; i<5; i++){
    suppliers[i] = msg.d[i];
}
$.fn.appendSnapshots(suppliers);

Where it fails

$.fn.appendSnapshots = function(snapshots) {
var accumulatedHeight = $("#suppliersTable").height();
var IDsShowing = new Array();

for (var i=0; i<snapshots.length; i++){

    if($("#supplierStatusDataRow\\." + snapshots[i].ID).length == 0){

        var $supplierStatusDataRow = $("#supplierStatusDataRow").clone(false)
        $supplierStatusDataRow.css('z-index', 1);
        $supplierStatusDataRow.find("*[id]").andSelf().each(function() { $(this).attr("id", $(this).attr("id") + "." + snapshots[i].ID); });

        $("#supplierStatusDataDiv").append($supplierStatusDataRow);

        $("#statusSupplierName\\." + snapshots[i].ID).append(snapshots[i].SupplierName);
        $("#statusSupplierNumber\\." + snapshots[i].ID).append(snapshots[i].SupplierNumber);
        $("#statusHostNumber\\." + snapshots[i].ID).append(snapshots[i].HostNumber);
        $("#statusSupplierType\\." + snapshots[i].ID).append(snapshots[i].SupplierType);
        $("#statusRecievedReportStatus\\." + snapshots[i].ID).append(snapshots[i].RecievedReportStatus);
        $("#statusBarCode\\." + snapshots[i].ID).append(snapshots[i].BarCode);
        $("#statusNumberOfUsers\\." + snapshots[i].ID).append(snapshots[i].NumberOfUsers);
        $("#statusOnBoardStatus\\." + snapshots[i].ID).append(snapshots[i].OnBoardStatus);
        $("#statusSupplierEmail\\." + snapshots[i].ID).append(snapshots[i].SupplierEmail);
        $("#statusPrimaryBuyer\\." + snapshots[i].ID).append(snapshots[i].PrimaryBuyer);
        $("#statusLastPODate\\." + snapshots[i].ID).append(snapshots[i].LastPODate);
        $("#statusPOMTD\\." + snapshots[i].ID).append(snapshots[i].POMTD);
        $("#statusPOYTD\\." + snapshots[i].ID).append(snapshots[i].POYTD);

        $supplierStatusDataRow.css('top', accumulatedHeight);

        $supplierStatusDataRow.animate({opacity: 1}, 500);

        }
        else{
            $("#supplierStatusDataRow\\." + snapshots[i].ID).animate({top: accumulatedHeight}, 500);
        }

        IDsShowing.push(parseInt(snapshots[i].ID));
        accumulatedHeight += $("#supplierStatusDataRow\\." + snapshots[i].ID).height() - 1;

    }

        $("#supplierStatusDataDiv").find('[id^="supplierStatusDataRow\\."]').each(function(i){ 
        var splitID = $(this).attr("id").split(".");
        if($.inArray(parseInt(splitID[1]), IDsShowing) == -1){
                $("#supplierStatusDataDiv").find('[id^="supplierStatusDataRow\\.' + splitID[1] + '"]').animate(
                    {opacity: 0}, 
                    500, 
                    function() { $("#supplierStatusDataRow\\." + splitID[1]).remove();
                });
            }
        });

        totalHeight = $("#supplierStatusRadioDiv").height() + $("#supplierStatusNameDiv").height() + $("#supplierStatusSlider").height() + accumulatedHeight;
        $("#suppliersSnapshot").animate({height: totalHeight}, 500);
        $("#supplierStatusDataDiv").animate({height: accumulatedHeight}, 500);
    }

Answer 1

Sounds like you are looking past the end of the array in your for loop. Try:

for(var i=0; i< msg.d.length; i++){
    suppliers[i] = msg.d[i];
}