Hold temporary data in JSON

Question

I really need help with an aspect of my project. My ultimate goal is to capture the changes made by a user and once they select confirm, post it to SQL for updating. I will use AJAX and PHP for the latter part of the project but I thought JSON would be a great idea to hold all the changes made by a user (the first part).

I am new to JSON and I'm having trouble putting the results in one large object that will be transferred to the server when the user selects "OK". Can someone help me with the coding of this? Is JSON the best way to accomplish the goal (of storing temporary?

Heres what I have so far (just a snippet):

HTML

<div class="button" data-info='2' data-id='8-7' onclick=addDeskid(e)></div>
<div class="button" data-info='4' data-id='2-5' onclick=remDeskId()></div>
<div class="button" value="submit">submit</div>

JS

function addDeskId(e){
    $adjustment;
    userObject = $(this); 
    userObjectChange = 'CHANGE_SEAT_TO'; //This is what i will use with AJAX and PHP to determine the SQL statement
    userObjectID = userObject.attr('data-info'); //This is the unique SQL ID for the object being modified
    userObjectDeskID = userObject.attr('data-id'); //This is the attribute for the object being modified
    userObjectSeatID = 9-4; //This is what the attribute is being modified to, for the question, ill make it a solid value
    var addUserObject = new jsonAddTest(userObjectID, userObjectChange, userObjectDeskID, userObjectSeatID,);

    //this is what the function is actually doing on the user side
    //$dragObject.attr("data-id",newSeat); //change desk number for new user location
    //$dragObject.attr("previousseat", "T");
    //var extPass = e;
    //moveOrSetupAccountLog(extPass);

}
function remDeskId(){
    userObject = $dropObject.find('div.dragTest');
    userObjectChange = 'REMOVESEAT'; //This is what i will use with AJAX and PHP to determine the SQL statement
    userObjectID = userObject.attr('data-info'); //This is the unique SQL ID for the object being modified
    userObjectDeskID = userObject.attr('data-id'); //This is the attribute for the object being modified
    userObjectDeskIDVal = 0; //This is what the attribute is being modified to

    var remUserObject = new jsonRemTest(userObjectID, userObjectChange, userObjectDeskID, userObjectDeskIDVal);

    //this is what the function is actually doing on the user side
    //userObject.attr({"data-id":""}); //remove desk number for new user location
    //userObject.appendTo('#userPool');



}

    //JSON functions test
function jsonRemTest(id, change, name, seat, value){
    this.ID = id;
    this.ChangeType = change;
    this.Name = name;
    this.Seat = seat;
    this.setTo = value;

            userMoves.push(jsonRemTest);

}
function jsonAddTest(id, change, name, desk, seat, previousseat, previousseatnewvalue){
    this.ID = id;
    this.ChangeType = change;
    this.Name = name;
    this.Seat = desk;
    this.setTo = seat;
    this.PreviousSeatValue = previousseat;
    this.PreviousSeatNewValue = previousseatnewvalue;

            userMoves.push(jsonAddTest);

}
console.log(JSON.stringify(userMoves));

I am getting the error: userMoves is undefined. I understand why this is happening but I don't know how to correct it.

TL;DR

Every time the user clicks on this button, it generates an array. I want to combine all the arrays into one object that contains all of them. When the user clicks on a submit button, the object is sent to the server using AJAX/PHP. Is this the best way to do this and if so, how do I combine the output of the JSON functions into one object in preparation for sending?

Thanks in advance

You will need to define `userMoves` outside of your functions so that you can update it. I do not see where `var userMoves = [];` is in your code. — Twisty, Nov 04 '15 at 17:09
Twisty's got it! More info on this http://stackoverflow.com/questions/4862193/javascript-global-variables — Mikel Bitson, Nov 04 '15 at 17:11
I will give this a shot and report back but do you guys think using JSON is the best way to accomplish what I want to do? — user247326, Nov 04 '15 at 17:19
put the var userMoves as a Global variable but it doesnt update, all I see is [] in console log — user247326, Nov 04 '15 at 17:25
Your use of ` $(this);` implies perhaps that jQuery is in place on your page? .Is that true? — Mark Schultheiss, Nov 04 '15 at 17:42
yes, I modified and selected a portion of the overall code for fundamentals on my question. — user247326, Nov 04 '15 at 18:09

score 1 · Answer 1 · answered Nov 04 '15 at 19:54

OK, Let's tackle this with some recommendations.

First off your onclick=addDeskid(e) is not properly cased to call your function and well, it is in the markup not the code, so let's address that.

I also changed your markup slightly to work with my event handlers better using a class for myAddButton and myRemButton, do what you will with that but I used it. I also added a button to get the results logged after all the events fired. This is the reason you get [] you have nothing in there when it gets logged. I did nothing with the submit, that is yours to handle (ajax call?)

<div class="button myAddButton" data-info='2' data-id='8-7'>add</div>
<div class="button myRemButton" data-info='4' data-id='2-5'>remove</div>
<div class="button mySubmitButton">submit</div>
<button id="ShowResults" type='button'>ShowResults</button>

Now the code - I re-engineered this to create a "class" for the object using makeClass. This is just one way but does allow for instance objects when needed and makes it easier to namespace some functions. I artificially put a private function in there just to demonstrate use as well as a public function. Note the the "this" inside that function is the instance object NOT a global object. (google makeClass with the attributed authors for more info)

I created a "class" with generic attributes. You COULD create different functions for "add" and "remove" instead of the SetChangeObject function - like one for each...I used a generic one so the "object" has the same signature.

Now the code: this is definitely a bit artificial in some places just to demonstrate use:

// makeClass - By Hubert Kauker (MIT Licensed)
// original by John Resig (MIT Licensed).
function makeClass() {
    var isInternal;
    return function (args) {
        if (this instanceof arguments.callee) {
            if (typeof this.init == "function") {
                this.init.apply(this, isInternal ? args : arguments);
            }
        } else {
            isInternal = true;
            var instance = new arguments.callee(arguments);
            isInternal = false;
            return instance;
        }
    };
}

var SeatGroup = makeClass(); //create our class
//the method that gets called on creation instance object of class
SeatGroup.prototype.init = function (id, changeType, name, desk, seat, setToValue, previousseat, previousseatnewvalue) {
    // a default value
    var defaultSeat = "default";
    var defaultName = "default";

    this.ID = id;
    this.ChangeType = changeType;
    this.Name = name ? name : defaultName;
    this.Desk = desk ? desk : "";
    this.Seat = seat ? seat : privateFunction(defaultSeat);;
    this.SetTo = setToValue ? setToValue : this.ID;
    this.PreviousSeatValue = previousseat ? previousseat : "";
    this.PreviousSeatNewValue = previousseatnewvalue ? previousseatnewvalue : "";

    this.changeObject = {};

    // public method
    this.SetChangeObject = function () {
        this.changeObject.ID = this.ID;
        this.changeObject.ChangeType = this.ChangeType;
        this.changeObject.Name = this.Name;
        this.changeObject.Seat = this.Seat;
        this.changeObject.Desk = this.Desk;
        this.changeObject.SetTo = this.SetTo;
        this.changeObject.PreviousSeatValue = this.PreviousSeatValue;
        this.changeObject.PreviousSeatNewValue = this.PreviousSeatNewValue;
    };

    function privateFunction(name) {
        return name + "Seat";
    }
};
var userMoves = [];//global warning-global object!!

//event handlers
$('.myAddButton').on('click', addDeskId);
$('.myRemButton').on('click', remDeskId);
$('#ShowResults').on('click', function () {
    console.log(JSON.stringify(userMoves));//log this after all are pushed
});

//function called with the "add" that can be customized
function addDeskId(e) {
    var uo = $(this);//jQuery of the "myAddButton" element
    var userObjectChange = 'CHANGE_SEAT_TO';
    var userObjectID = uo.data('info');
    var userObjectDeskID = uo.data('id');
    var userObjectSeatID = '9-4';
    // create a private instance of our class (calls init function)
    var uChange = SeatGroup(userObjectID, userObjectChange, userObjectDeskID, userObjectSeatID);
    uChange.SetChangeObject();//call public function
    //log what we created
    console.dir(uChange.changeObject);
    //does not work, its private:  console.log(  uChange.privateFunction('hi'));
    // push to our global
    userMoves.push(uChange.changeObject);
}

// event function, customize as needed
function remDeskId() {
    var userObject = $(this);
    var userObjectChange = 'REMOVESEAT';
    var userObjectID = userObject.data('info');//use jQuery data, easier/better
    var userObjectDeskID = userObject.data('id');
    var userObjectDeskIDVal = 0;
    var remUserObject = SeatGroup(userObjectID, userObjectChange, userObjectDeskID);
    remUserObject.PreviousSeatValue = "FreddySeat";//show how we set a properly of our object
    remUserObject.SetChangeObject();//call public function
    console.dir(remUserObject.changeObject);
    userMoves.push(remUserObject.changeObject);
}

Play around with it here: http://jsfiddle.net/q43cp0vd/1/

Hold temporary data in JSON

1 Answers1