Creating an array object within an array object

Question

I have an array object that needs another array object added to it. So i have details of the object that need the rows in a table to be added to that object as an array. I have tried a few suggestions on stackoverflow , but none seems to be working, and i am not sure this has something to do with the fact that the table is created by js.

// Adding Cosignment number
$('#parcel-overview').append(
 // Add main tables which will display the added packages
 '<table border="1">' +
 '<thead><tr><th>Packages</th><th>Weight</th> <th>Vol Weight</th><th>Charge Weight</th> <th>Price</th></tr></thead><tbody id="parcels-added-overview"></tbody> ' +
 '</table>'
 );

for (var i = 0; i < packageNum; i++) {

    var ii = (i + 1).toString();

    // Working out volemetric weight
    wei = $('#added-parcels #weighting-' + ii + ' input').val();
    len = $('#added-parcels #lengthing-' + ii + ' input').val();
    wid = $('#added-parcels #widthing-' + ii + ' input').val();
    hei = $('#added-parcels #heighting-' + ii + ' input').val();

    //Calculating Volumetric weight
    tot = ((len * wid * hei) / 5000).toFixed(1);

    pri = (tot * 23).toFixed(2);

    chr = (tot * 12).toFixed(2);
    $('#parcels-added-overview').append(
   '<tr>' +
     '<td class="par-id">' + (i + 1).toString() + '</td>' +
     '<td class="par-weight">' + wei.toString() + ' kg\'s</td>' +
     '<td class="par-vol-weight">' + tot.toString() + ' kg\'s</td>' +
     '<td class="par-charge-weight">R ' + chr.toString() + '</td>' +
     '<td class="par-price">R ' + pri.toString() + ' </td>' +
   '</tr>'
    );
}

I then want to add the values of that table that have been added dynamically to an object array that is then added to the primary object array.

 var parcelObj = new Object();

    $.each($('#parcels-added-overview tr'),function (index) {

        parcelObj.parcelId = $(this).children('.par-id').text();
        parcelObj.totalWeight = $(this).children('.par-weight').text();
        parcelObj.volWeight = $(this).children('.par-vol-weight').text();
        parcelObj.chargeWeight = $(this).children('.par-charge-weight').text();
        parcelObj.overallPrice = $(this).children('.par-price').text();

        parcelsArr.push(parcelObj);

    });

    consignmentObj.parcels = parcelsArr;

    consignmentsArr.push(consignmentObj);

I might be a n00b , but this code (although i think its fairly verbose ) should work.

Does the $(this).children not identify directly on each() row that it is iterating over?

When i add console.log(consignmentsArr); i get the array within the object as it should be but the values for the parcel object are just repeating the last row of the table.

1: Object
  deliName: ""
  deliStreet: ""
  docType: "Document"
  insurance: "None"
  parcels: Array[2]
    0: Object
      chargeValue:"R34.43"
      overallPrice:"R43.54"
      parcelId:"2"
      totalWeight:"65 kg's"
      volWeight:"63 kg's"
    1: Object
      chargeValue:"R34.43"
      overallPrice:"R43.54"
      parcelId:"2"
      totalWeight:"65 kg's"
      volWeight:"63 kg's"

Why can I not get the first row values to be added to parcels[0]?

Thanks

Answer 1

Try to declare parcelObj object inside the function.

    $.each($('#parcels-added-overview tr'),function (index) {

        var parcelObj = new Object();

        parcelObj.parcelId = $(this).children('.par-id').text();
        parcelObj.totalWeight = $(this).children('.par-weight').text();
        parcelObj.volWeight = $(this).children('.par-vol-weight').text();
        parcelObj.chargeWeight = $(this).children('.par-charge-weight').text();
        parcelObj.overallPrice = $(this).children('.par-price').text();

        parcelsArr.push(parcelObj);

    });

    consignmentObj.parcels = parcelsArr;

    consignmentsArr.push(consignmentObj);