Why does jquery return different values than the values submitted?

Question

Update:
Please see the answer noted below as, ultimately, the problem had nothing to do with jsquery.

=============

Issue:
I submit an object to jquery to convert into a serialized string that will become part of a "POST" request to a server, and the data returned from the serialization request is different than the data sent on many occasions.

An example:

The JavaScript code that implements the server POST request:

function send_data(gpg_data) {
    var query_string;
    query_string = '?' + $.param(gpg_data, traditional = true);
    console.log('gpg_data =', gpg_data) 
    console.log('query_string =', query_string);
    $.post(server_address + query_string);
    return;
}

This is the structure sent to the jquery param() function.
(copied from the browser console in developer mode.)

gpg_data = 
{controller_status: 'Connected', motion_state: 'Stopped', angle_dir: 'Stopped', time_stamp: 21442, x_axis: 0, …}
angle_dir: "Stopped"
controller_status: "Connected"
force: 0
head_enable: 0
head_x_axis: 0
head_y_axis: 0
motion_state: "Stopped"
time_stamp: 21490
trigger_1: 0
trigger_2: 0
x_axis: 0
y_axis: "0.00"

. . . and the returned "query string" was:

query_string = ?controller_status=Connected&motion_state=Stopped&angle_dir=Stopped&time_stamp=21282&x_axis=0&y_axis=0.00&head_x_axis=0&head_y_axis=0&force=0&trigger_1=1&trigger_2=1&head_enable=0

The data received by the server is:

ImmutableMultiDict([('controller_status', 'Connected'), ('motion_state', 'Stopped'), ('angle_dir', 'Stopped'), ('time_stamp', '21282'), ('x_axis', '0'), ('y_axis', '0.00'), ('head_x_axis', '0'), ('head_y_axis', '0'), ('force', '0'), ('trigger_1', '1'), ('trigger_2', '1'), ('head_enable', '0')]) 

For example, note that "trigger_1" returns 1 when the data sent to it is a zero.

I have tried setting the query to "traditional = true" to revert to an earlier style of query handling as some articles suggested - which did not work.  I tried this with jquery 3.2 and 3.6.

I am not sure exactly how jquery manages to munge the data so I have no idea where to look.

I have looked at my script and at the unpacked jquery code, and I can make no sense out of why or how it does what it does.

Any help understanding this would be appreciated.

P.S.
web searches on "troubleshooting jquery" returned very complex replies that had more to do with editing e-commerce web pages with fancy buttons and logins than with simply serializing data.

P.P.S.
I am tempted to just chuck the jquery and write my own serialization routine. (grrrr!)

===================

Update:

As requested, a link to the browser-side context.

To run: unpack the zip file in a folder somewhere and attach an analog joystick/gamepad to any USB port, then launch index.html in a local browser.  Note that a purely digital gamepad - with buttons only or with a joystick that acts like four buttons - won't work.

You will want to try moving joystick axes 1 and 2, (programmatically axes 0 and 1) and use the first (0^th) trigger button.

You will get a zillion CORS errors and it will complain bitterly that it cannot reach the server, but the server side context requires a GoPiGo-3 robot running GoPiGo O/S 3.0.1, so I did not include it.

Note: This does not work in Firefox as Firefox absolutely requires a "secure context" to use the Gamepad API.  It does work in the current version of Chrome, (Version 97.0.4692.99 (Official Build) (64-bit)), but throws warnings about requiring a secure context.

Please also note that I have made every attempt I know how to try to troubleshoot the offending JavaScript, but trying to debug code that depends on real-time event handling in a browser is something I have not figured out how to do - despite continuous searching and efforts.  Any advice on how to do this would be appreciated!

======================

Update:
Researching debugging JavaScript in Chrome disclosed an interesting tidbit:

Including the line // @ts-check as the first line in the JavaScript code turns on additional "linting" (?) or other checks that, (mostly) were a question of adding "var" to the beginning of variable declarations.

However. . . .
There was one comment it made:

gopigo3_joystick.x_axis = Number.parseFloat((jsdata.axes[0]).toFixed(2));
gopigo3_joystick.y_axis = Number.parseFloat(jsdata.axes[1]).toFixed(2);

I could not assign gopigo3_joystick.y_axis to a string object, (or something like that), and I was scratching my head - that was one of the pesky problems I was trying to solve!

If you look closely at that second line, you will notice I forgot a pair of parenthesis, and that second line should look like this:

gopigo3_joystick.y_axis = Number.parseFloat((jsdata.axes[1]).toFixed(2));

Problem solved - at least with respect to that problem.

Answer 1

I figured it out and it had nothing to do with jquery.

Apparently two things are true:

1. The state of the gpg_data object's structure is "computed", (snapshot taken), the first time the JavaScript engine sees the structure and that is the state that is saved, (even though the value may change later on). In other words, that value is likely totally bogus.

   Note: This may only be true for Chrome. Previous experiments with Firefox showed that these structures were updated each time they were encountered and the values seen in the console were valid. Since Firefox now absolutely requires a secure context to use the gamepad API, I could not use Firefox for debugging.

2. I was trying to be "too clever". Given the following code snippet:

   function is_something_happening(old_time, gopigo3_joystick) {
       if (gopigo3_joystick.trigger_1 == 1 || gopigo3_joystick.head_enable == 1) {
           if (old_time != Number.parseFloat((gopigo3_joystick.time_stamp).toFixed(0))) {
               send_data(gopigo3_joystick)
               old_time = gopigo3_joystick.time_stamp
           }
       }
       return;
   }
   

   The idea behind this particular construction was to determine if "something interesting" is happening, where "something interesting" is defined as:

   • A keypress, (handled separately)
   • A joystick movement if either the primary trigger or the pinky trigger is pressed.
   • Movement without any trigger pressed is ignored so that if the user accidentally bumps against the joystick, the robot doesn't go running around.

   Therefore the joystick data only gets updated if the trigger is pressed. In other words, trigger "release" events - the trigger is now = 0 - are not recorded.

The combination of these two events - Chrome taking a "snapshot" of object variables once and once only, (or not keeping them current) - and the trigger value persisting, lead me to believe that jquery was the problem since the values appeared to be different on each side of the jquery call.