Weird jQuery data() issue - Help? - php

Question

jquery 1.6.2 / Firefox 6.0.1
OK I'm working on this shipment manager interface and when the page is loaded, each table row tr is assigned an id "shipment_XXXXX" where XXXXX is the id of the shipment from the database.
All the data regarding the shipment is, in PHP set to a multidimensional associative array which contains "shipmentItems" and "pkgs" among other things which are irrelevant. The shipmentItems object is a regular numeric array, where each element has several associative values such as "name", "qty", "price" so for example:
$shipmentItems[0]["name"] = "item 1";
$shipmentItems[0]["qty"] = 5;
$shipmentItems[0]["price"] = 20.00;
$shipmentItems[1]["name"] = "item 2";
$shipmentItems[1]["qty"] = 3;
$shipmentItems[1]["price"] = 5.00;
This array indicates all of the items that are part of this shipment in whole.
The other array pkgs is a list of each package in the shipment and each package has a packing_slip object/associative array. Example:
PACKAGE #1
$pkgs[0]['packing_slip'][0]['name'] = "item 1";
$pkgs[0]['packing_slip'][0]['qty'] = 3;
$pkgs[0]['packing_slip'][0]['price'] = 20.00;
$pkgs[0]['packing_slip'][1]['name'] = "item 2";
$pkgs[0]['packing_slip'][1]['qty'] = 1;
$pkgs[0]['packing_slip'][1]['price'] = 50.00;
PACKAGE #2
$pkgs[1]['packing_slip'][0]['name'] = "item 1";
$pkgs[1]['packing_slip'][0]['qty'] = 2;
$pkgs[1]['packing_slip'][0]['price'] = 20.00;
$pkgs[1]['packing_slip'][1]['name'] = "item 2";
$pkgs[1]['packing_slip'][1]['qty'] = 2;
$pkgs[1]['packing_slip'][1]['price'] = 50.00;
You'll see that the pkg array has the full shipment item list for each packing slip for each package. if you add the 0index qty from both packages you'll see that it adds up to the full shipment qty for that item line.
This set of data gets converted to a JSON string by php and tucked into a hidden form element within its corrosponding row.
After the page is loaded, jquery goes through each hidden json element, parses the json string to an object, the attaches the object to the TR.data('shipmentItems') and TR.data('pkgs') for each shipment in the list.
This is where things get funky...
I'm doing a function where the user can add a new package to the shipment. When they do this they are prompted to specify which package has how many quantities of each item in the whole shipment. They essentially lay out the packing slips.
The function they execute after they have mapped out the quantities, recreates the pkgs array(object) on the fly, which it gets from its rows .data('pkgs') container - and then re-attaches the pkgs object back to the data('pkgs') container.
I have logged the output of this function heavily and the quantities are all being assigned to the proper values see here:
var shipmentItems = $('#shipment_'+shipid).data('shipmentItems');
var pkgs = $('#shipment_'+shipid).data('pkgs');
var pkgnum = pkgs.length; // always returns one higher than last index.
// add new pkg to array
pkgs[pkgnum] = new Object();
pkgs[pkgnum].weight = weight;
console.log("("+pkgnum+") pkgs length: " + pkgs.length);
// overwrite packing slip data.
for(var x = 0; x < pkgs.length; x++) {
var curPS = new Array();
var curins = 0;
for(var y = 0; y < shipmentItems.length; y++) {
var curqty = parseInt($('#pkgqty-'+y+'-'+x).val());
curins += curqty * shipmentItems[y]['price'];
curPS.push(shipmentItems[y]);
console.log("["+y+"] before: " + curPS[y]['qty']);
curPS[y]['qty'] = curqty;
console.log("["+y+"] after: " + curPS[y]['qty']);
}
console.log(curPS[0]['qty'] + ' - ' + curPS[1]['qty']);
pkgs[x].packing_slip = curPS;
pkgs[x].insurance = curins;
}
// write pkgs data()
$('#shipment_'+shipid).removeData('pkgs');
$('#shipment_'+shipid).data('pkgs', pkgs);
The log output of the above is as follows:
(1) pkgs length: 2
[0] before: 3
[0] after: 2
[1] before: 4
[1] after: 3
2 - 3 // value of curPS[0]['qty'] and curPS[1]['qty'] for pkg#1 - pkgs[0] is set to curPS at this point.
[0] before: 2
[0] after: 1
[1] before: 3
[1] after: 1
1 - 1 // value of curPS[0]['qty'] and curPS[1]['qty'] for pkg#2 - pkgs[1] is set to curPS at this point.
This looks like it worked, right? Wrong. After the function completes I have a button I can push that prints out all the data() vars for a row. Not only are the qty value of every single pkg['packing_slip'][x] item set to 1, but if I look at the shipmentItems from this same object log, the qty values for all of the shipmentItems have also been reset to 1. Which is odd because at no point in the code does shipmentItems ever get overwritten and should still be the exact same as it was when the page loaded...
Anyone have any ideas whats going on here?

Answer 1

maybe it's because you pass shipmentItems by Reference - curPS.push(shipmentItems[y]);
Try to pass it by Value - curPS.push(shipmentItems[y].slice());

Answer 2

OK I ended up getting this working thanks to your (Alon) suggestion pointing me in the right direction. The slice() method did not work outright because the array elements I'm slicing out contained objects and so the deeper objects were still being passed as references rather than being copied. After some searching around I found the jQuery.extend() method was what I needed to copy the object arrays! Thanks again!