JavaScript - Returning Json Object, Reference Lost

The goal is for selectedDay to be assigned the value of the system variable Mainpackage.subclass0.subclass1.firstDay and then incremented by two days. Mainpackage.subclass0.subclass1.firstDay needs to be unchanged.

Important system variable in red.
To be 'manipulated and used' variable in green.
Even with an intermediary, third, dummy variable it doesn't work:

Code:

    
//Declarations and instantiations
    var  systemDate  = new Date();
    var  selectedDay  = new Date();
     Mainpackage.subclass0.subclass1.firstDay ;
//Assignments and manipulations
     systemDate  =  Mainpackage.subclass0.subclass1.firstDay ;
     selectedDay  =  systemDate ;
     selectedDay .setDate( selectedDay .getDate()+2);
//Logging
    console.log('Mainpackage.subclass0.subclass1.firstDay: ' +Mainpackage.subclass0.subclass1.firstDay +'\n' +'systemDate: ' +systemDate +'\n' +'selectedDay :' +selectedDay +'\n');

Console log is:
Code:

Mainpackage.subclass0.subclass1.firstDay: Tue Aug 24 2010 00:00:00 GMT-0400 (Eastern Daylight Time) 
systemDate: Tue Aug 24 2010 00:00:00 GMT-0400 (Eastern Daylight Time) 
selectedDay: Tue Aug 24 2010 00:00:00 GMT-0400 (Eastern Daylight Time)

It doesn't work in my webapp : All variables change at the same time.

My question is commented in the script:

Code:

function Love(){
	var req = {
		ring : 'gold',
		money : 'a lot',
		commitment : 'long-term'
	}
	
	this.loveReqs = function(){
		return req;
	}
}

var you = new Love();
var details = you.loveReqs();
details.ring = "silver";
console.log(details.ring);


var me = new Love();
var details = me.loveReqs();
console.log(details.ring); // why does this return gold and not silver if req is passed by reference and we already changed its value above and so it's pointing to the same memory position?

I am confused about what the return keyword is actually returning when returning an object, a primitive, or a function.

My confusion is compounded by the fact that I'm not sure if a function is an object or not.
According to the book JavaScript Programmer Reference it is:
"All functions in JavaScript are first class objects , meaning they can be passed around like any other object reference. In fact, regardless of how they are created, functions are instances of a global object named (aptly) Function."

However, someone else states that a function is not an object. An object is a set of primitives and references. A function is executable code. Functions become objects through the use of the new operator. Yet, in the book I mentioned, it says you don't need the new keyword to execute the function as an object, as it already inherits from the object Function when the function keyword is used:
Code:

function functionName([argname1 [, ...[, argnameN]]])
{
statements;
}

So there's one source of contradiction.

Now the bigger issue is what is going on when the return keyword is used. Notice the Validation() function returns an object as its last expression. This technique is common, where you return an object which contains functions in form of object notation. I believe this is done so that we create a closure so that when the intepreter exits the Validation() method, since we created a closure by returning an object, which contains the inner functions addRule and getRule, the local variables of Validation() are not destroyed, given that we can reference them through the two inner functions that make use of the local variables of the outer function. So when we use the return keyword on an object literal, and then exit the function, when we call one of the inner functions as we do later:
Code:

var rule = $.Validation.getRule(types[type]);

essentially getRule() is called, passes an argument, which is received by the inner function as parameter we call name:
Code:

getRule : 
function(name) {  

                return rules[name];
            }

First, note that the return {} is written in object notation, therefore making getRule a local variable and, thus, private function only accessible through the namespace of Validation().

Validation() declares the rules local variable and because of the closure, we can access the rules local variable through the getRule() inner function.

*****Here's the part that really thows me off. We return rules[name]. So let's say name is equal to email. This is an associative array so email (held in name) is a property of rules. So here we return the object's property:
Code:

return rules[name];

And then assign it to a local variable called rule:
Code:

var rule = $.Validation.getRule(types[type]);

So when we return an object rules[name], do we return a reference to an object or a value? In other words, by returning rules[name], where name is equal to email, are we then returning a reference to the following object literal:
Code:

email : {
               check: function(value) {
                   
                   if(value)
                       return testPattern(value,".+@.+\..+");
                   return true;
               },
               msg : "Enter a valid e-mail address."
            }

And if we are returning a reference, by returning a reference, are we essentially pointing to this object when we assign it to rule? In other words, the variable rule is just pointing to the object literal?

And is that the reason we can then access the check function or msg local variable through rule using dot notation, because rule points to the email object literal?

Now the ultimate brain twist for me is that if a function is an object, then why when return a function, it returns a value, such as a boolean, if an object only returns a reference and not the value?

Code:

//Validation is a local variable as it is in a self-executing anonymous function. The purpose of the said anonymous function is to pass the jQuery object as a parameter $ so the $() function will be in scope of the anonymous function and not interfere with other libraries that make use of the same function technique - in the global scope. 
(function($) {
        var rules = {
            
            email : {
               check: function(value) {
                   
                   if(value)
                       return testPattern(value,".+@.+\..+");
                   return true;
               },
               msg : "Enter a valid e-mail address."
            },
            url : {

               check : function(value) {

                   if(value)
                       return testPattern(value,"https?://(.+\.)+.{2,4}(/.*)?");
                   return true;
               },
               msg : "Enter a valid URL."
            },
            required : {
                
               check: function(value) {

                   if(value)
                       return true;
                   else
                       return false;
               },
               msg : "This field is required."
            }
        }
        var testPattern = function(value, pattern) {

            var regExp = new RegExp("^"+pattern+"$","");
            return regExp.test(value); //The test() method is built into javascript
        }
        return {
            
            addRule : function(name, rule) {  

                rules[name] = rule;
            },
            getRule : function(name) { 

                return rules[name];
            }
        }
    }
    
    /* 
    Form factory 
    */
    var Form = function(form) {
        
        var fields = [];
    
        $(form[0].elements).each(function() {
            var field = $(this);
            if(field.attr('validation') !== undefined) {
                fields.push(new Field(field));
            }
        });
        this.fields = fields;
    }
    Form.prototype = {
        validate : function() {

            for(field in this.fields) {
                
                this.fields[field].validate();
            }
        },
        isValid : function() {
            
            for(field in this.fields) {
                
                if(!this.fields[field].valid) {
            
                    this.fields[field].field.focus();
                    return false;
                }
            }
            return true;
        }
    }
    
    /* 
    Field factory 
    */
    var Field = function(field) {

        this.field = field;
        this.valid = false;
        this.attach("change");
    }
    Field.prototype = {
        
        attach : function(event) {
        
            var obj = this;
            if(event == "change") {
                obj.field.bind("change",function() {
                    return obj.validate();
                });
            }
            if(event == "keyup") {
                obj.field.bind("keyup",function(e) {
                    return obj.validate();
                });
            }
        },
        validate : function() {
            
            var obj = this,
                field = obj.field,
                errorClass = "errorlist",
                errorlist = $(document.createElement("ul")).addClass(errorClass),
                types = field.attr("validation").split(" "),
                container = field.parent(),
                errors = []; 
            
            field.next(".errorlist").remove();
            for (var type in types) {

                var rule = $.Validation.getRule(types[type]);
                if(!rule.check(field.val())) {

                    container.addClass("error");
                    errors.push(rule.msg);
                }
            }
            if(errors.length) {

                obj.field.unbind("keyup")
                obj.attach("keyup");
                field.after(errorlist.empty());
                for(error in errors) {
                
                    errorlist.append("<li>"+ errors[error] +"</li>");        
                }
                obj.valid = false;
            } 
            else {
                errorlist.remove();
                container.removeClass("error");
                obj.valid = true;
            }
        }
    }
    
    /*
    Validation extends jQuery prototype
    */
    $.extend($.fn, {
        
        validation : function() {
            
            var validator = new Form($(this));
            $.data($(this)[0], 'validator', validator);
            
            $(this).bind("submit", function(e) {
                validator.validate();
                if(!validator.isValid()) {
                    e.preventDefault();
                }
            });
        },
        validate : function() {
            
            var validator = $.data($(this)[0], 'validator');
            validator.validate();
            return validator.isValid();
            
        }
    });
    $.Validation = new Validation();
})(jQuery);

Thanks for any response.

Hey, I'm wondering how do I go about saving an array object in JSON.
I got some help in saving game.money, as you see below in the code. That is something I couldn't figured out on my own even after searching for ages.
Now I'm wonder how do I save an array such as game.buildings[0]. It's the same as game.money except it's an array.
All inputs are greatly appreciated!

Code:

function save() {
    var save = {
        game: {
            money: game.money
        }
    };
    localStorage.setItem("save", JSON.stringify(save));
};

function load() {
    var GameTwo = JSON.parse(localStorage.getItem("save"));
    if (typeof GameTwo.game.money !== "undefined") game.money = GameTwo.game.money;
    document.getElementById("money").innerHTML = game.money;
};

Reply With Quote




01-19-2015, 06:13 AM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts

Nothing magic about arrays. Use the same code: Code:

function saveArray( usingName, anArrayToSave ) 
{
    localStorage.setItem( usingName, JSON.stringify(anArrayToSave));
};

function loadArray( nameToLoad ) 
{
    return JSON.parse( localStorage.getItem( nameToLoad ) );
}

Heck, here's a complete demo: Code:

<!DOCTYPE html>
<html>
<body>
<div id="before"></div>
<hr/>
<div id="after"></div>
<hr/>


<script type="text/javascript">
function saveArray( usingName, anArrayToSave ) 
{
    localStorage.setItem( usingName, JSON.stringify(anArrayToSave));
};

function loadArray( nameToLoad ) 
{
    return JSON.parse( localStorage.getItem( nameToLoad ) );
}

var foo = loadArray("zamboni");
var div = document.getElementById("before");
if ( foo == null )
{
    div.innerHTML = "First time";
    foo = [ "apples", "bananas", "canteloupe", "dates", "eggplant", "falafel" ];
} else {
    div.innerHTML = foo.join(",");
}

foo.sort( function() { return Math.random() < 0.5 ? -1 : 1; } );

div = document.getElementById("after");
div.innerHTML = foo.join(",");

saveArray( "zamboni", foo );
</script>
</body>
</html>

I have a very large json file, and inside of that json file is an array. I would like to use JavaScript to take that json as an argument, parse through the json and only take certain elements from it and put it into a new json file, below is an example of what I mean:
Code:

    {
    "contextType": "Account",
    "preferences": null,
    "custodianCode": null,
    "data": [{
    "id": "0",
    "account": "11111111",
    "field2": true,
    "field3": false,
    "field4": "BROK",
    "field5": "Broker",
    "field6": "1",
    "field7": "Cash"
     },{
     "id": "1",
    "account": "222222222",
    "field2": true,
    "field3": false,
    "field4": "BROK",
    "field5": "Broker",
    "field6": "1",
    "field7": "Cash"
    }]

    }

And I want to pull from that and get something like this as a new json

Code:

    {
     "newArray": [{
    "id": "0",
    "account": "11111111",
    "field2": true,
    "field3": false,
    "field4": "BROK",
    "field6": "1"
     },{
    "id": "0",
    "account": "222222222",
    "field2": true,
    "field3": false,
    "field4": "BROK",
    "field6": "1"
    }]

    }

Also the file is local to my computer and can be outputted locally as well, I am trying to use node.js and JavaScript this is what I have so far

Code:

     var json = require('./simple.json');
     var keeperFields = ["id", "account", "field2", "field3", "field4", "field6"];
     var newJSON = {newArray: [] };
     var i;
     var fields;

     for (i = 0; i < keeperFields.length; i++) {
       for (fields in json) {
         if (json.hasOwnProperty(keeperFields[i])) {
           newJSON.newArray.push(keeperFields[i]);
           }
          }
         }

       console.log(newJSON);

This is just a small example the real json file is huge with thousands of lines. Any help or suggestions are appreciated!

This current solution is giving me a console log of { newArray: []} instead of the expected result above