I was trying to write a generic clone function which should be able to do true deep cloning. I have come across this link, How to Deep clone in javascript and took the function from there.
That code workds pretty well when I try using direct Javascript. I did minor modifications in the code and tried to put in the JSNI code in GWT.
clone function:
deepCopy = function(item)
{
if (!item) {
return item;
} // null, undefined values check
var types = [ Number, String, Boolean ], result;
// normalizing primitives if someone did new String('aaa'), or new Number('444');
types.forEach(function(type) {
if (item instanceof type) {
result = type(item);
}
});
if (typeof result == "undefined") {
alert(Object.prototype.toString.call(item));
alert(item);
alert(typeof item);
if (Object.prototype.toString.call(item) === "[object GWTJavaObject]") {
alert('1st');
result = [];
alert('2nd');
item.forEach(function(child, index, array) {//exception thrown here
alert('inside for each');
result[index] = deepCopy(child);
});
} else if (typeof item == "GWTJavaObject") {
alert('3rd');
if (item.nodeType && typeof item.cloneNode == "function") {
var result = item.cloneNode(true);
} else if (!item.prototype) {
result = {};
for ( var i in item) {
result[i] = deepCopy(item[i]);
}
} else {
if (false && item.constructor) {
result = new item.constructor();
} else {
result = item;
}
}
} else {
alert('4th');
result = item;
}
}
return result;
}
And the list am passing to this function is like this:
List<Integer> list = new ArrayList<Integer>();
list.add( new Integer( 100 ) );
list.add( new Integer( 200 ) );
list.add( new Integer( 300 ) );
List<Integer> newList = ( List<Integer> ) new Attempt().clone( list );
Integer temp = new Integer( 500 );
list.add( temp );
if ( newList.contains( temp ) )
Window.alert( "fail" );
else
Window.alert( "success" );
But when I execute this, I get null pointer exception in the clone function immediately after alert("2nd") line.
Kindly help.
P.S: I am trying to get a generic clone method here that can be used to clone any object.
GWT prototyped objects don't have a forEach method; they do not inherit standard javascript object prototypes, as they are supposed to act like java objects, not javascript objects.
You could probably get away with Object.prototype.forEach.call(item, function(){})
Related
I'm working with an API that returns a schema for validating a form before users can submit their data.
For example, the schema has a User class featuring an attribute called email. If there is an error, User.validators.getEmailErrors() returns an Array of all the errors, e.g. ['Email address cannot be blank', 'Email addresses must match'].
However, if the field is valid, and no errors are found, getEmailErrors() returns null.
In my app, I want to safely chain more methods from getEmailErrors(), e.g. getEmailErrors().join(','), but without checking for null beforehand. Rather, is there a way, e.g. using ES6 proxies, to make getEmailAddress() aware of whether it will return an Array, and to safely ignore any methods like join() in case it returns null?
The easy solution would be to return an empty Array in the valid case instead of null, but assume I can't change that.
It can be done, indirectly.
Following code was originated from HERE, and I add some code for testing.
Thanks for the original author, Djamel Hassaine.
{
class test {
constructor () {
this.in = 0;
}
sum ( a, b ) {
this.in += a + b;
return this;
}
}
let k = new test();
function traceMethodCalls(obj) {
const handler = {
get(target, propKey, receiver) {
console.log( target, propKey, receiver );
console.log( this );
console.log( handler === this );
const targetValue = Reflect.get(target, propKey, receiver);
if (typeof targetValue === 'function') {
return function (...args) {
console.log('CALL', propKey, args);
console.log( this );
console.log( this === receiver );
return targetValue.apply(this, args); // (A)
}
} else {
return targetValue;
}
}
};
return new Proxy(obj, handler);
}
let l = traceMethodCalls( k );
console.log( l.sum( 1, 2 ) );
console.log( l );
console.log( l.sum( 1, 2 ) );
console.log( l );
}
Another way:
User.validators.getEmailErrorsOriginal = User.validators.getEmailErrors
User.validators.getEmailErrors = function ( ...args ) {
return ( this.getEmailErrorsOriginal( ...args ) || [] );
}
(getEmailErrors() || []).join(',')
Is this what you look for ? Its not very clean but it certainly short ...
Let's say we have this JavaScript object:
var object = {
innerObject:{
deepObject:{
value:'Here am I'
}
}
};
How can we check if value property exists?
I can see only two ways:
First one:
if(object && object.innerObject && object.innerObject.deepObject && object.innerObject.deepObject.value) {
console.log('We found it!');
}
Second one:
if(object.hasOwnProperty('innerObject') && object.innerObject.hasOwnProperty('deepObject') && object.innerObject.deepObject.hasOwnProperty('value')) {
console.log('We found it too!');
}
But is there a way to do a deep check? Let's say, something like:
object['innerObject.deepObject.value']
or
object.hasOwnProperty('innerObject.deepObject.value')
There isn't a built-in way for this kind of check, but you can implement it easily. Create a function, pass a string representing the property path, split the path by ., and iterate over this path:
Object.prototype.hasOwnNestedProperty = function(propertyPath) {
if (!propertyPath)
return false;
var properties = propertyPath.split('.');
var obj = this;
for (var i = 0; i < properties.length; i++) {
var prop = properties[i];
if (!obj || !obj.hasOwnProperty(prop)) {
return false;
} else {
obj = obj[prop];
}
}
return true;
};
// Usage:
var obj = {
innerObject: {
deepObject: {
value: 'Here am I'
}
}
}
console.log(obj.hasOwnNestedProperty('innerObject.deepObject.value'));
You could make a recursive method to do this.
The method would iterate (recursively) on all 'object' properties of the object you pass in and return true as soon as it finds one that contains the property you pass in. If no object contains such property, it returns false.
var obj = {
innerObject: {
deepObject: {
value: 'Here am I'
}
}
};
function hasOwnDeepProperty(obj, prop) {
if (typeof obj === 'object' && obj !== null) { // only performs property checks on objects (taking care of the corner case for null as well)
if (obj.hasOwnProperty(prop)) { // if this object already contains the property, we are done
return true;
}
for (var p in obj) { // otherwise iterate on all the properties of this object.
if (obj.hasOwnProperty(p) && // and as soon as you find the property you are looking for, return true
hasOwnDeepProperty(obj[p], prop)) {
return true;
}
}
}
return false;
}
console.log(hasOwnDeepProperty(obj, 'value')); // true
console.log(hasOwnDeepProperty(obj, 'another')); // false
Alternative recursive function:
Loops over all object keys. For any key it checks if it is an object, and if so, calls itself recursively.
Otherwise, it returns an array with true, false, false for any key with the name propName.
The .reduce then rolls up the array through an or statement.
function deepCheck(obj,propName) {
if obj.hasOwnProperty(propName) { // Performance improvement (thanks to #nem's solution)
return true;
}
return Object.keys(obj) // Turns keys of object into array of strings
.map(prop => { // Loop over the array
if (typeof obj[prop] == 'object') { // If property is object,
return deepCheck(obj[prop],propName); // call recursively
} else {
return (prop == propName); // Return true or false
}
}) // The result is an array like [false, false, true, false]
.reduce(function(previousValue, currentValue, index, array) {
return previousValue || currentValue;
} // Do an 'or', or comparison of everything in the array.
// It returns true if at least one value is true.
)
}
deepCheck(object,'value'); // === true
PS: nem035's answer showed how it could be more performant: his solution breaks off at the first found 'value.'
My approach would be using try/catch blocks. Because I don't like to pass deep property paths in strings. I'm a lazy guy who likes autocompletion :)
JavaScript objects are evaluated on runtime. So if you return your object statement in a callback function, that statement is not going to be evaluated until callback function is invoked.
So this function just wraps the callback function inside a try catch statement. If it catches the exception returns false.
var obj = {
innerObject: {
deepObject: {
value: 'Here am I'
}
}
};
const validate = (cb) => {
try {
return cb();
} catch (e) {
return false;
}
}
if (validate(() => obj.innerObject.deepObject.value)) {
// Is going to work
}
if (validate(() => obj.x.y.z)) {
// Is not going to work
}
When it comes to performance, it's hard to say which approach is better.
On my tests if the object properties exist and the statement is successful I noticed using try/catch can be 2x 3x times faster than splitting string to keys and checking if keys exist in the object.
But if the property doesn't exist at some point, prototype approach returns the result almost 7x times faster.
See the test yourself: https://jsfiddle.net/yatki/382qoy13/2/
You can also check the library I wrote here: https://github.com/yatki/try-to-validate
I use try-catch:
var object = {
innerObject:{
deepObject:{
value:'Here am I'
}
}
};
var object2 = {
a: 10
}
let exist = false, exist2 = false;
try {
exist = !!object.innerObject.deepObject.value
exist2 = !!object2.innerObject.deepObject.value
}
catch(e) {
}
console.log(exist);
console.log(exist2);
Try this nice and easy solution:
public hasOwnDeepProperty(obj, path)
{
for (var i = 0, path = path.split('.'), len = path.length; i < len; i++)
{
obj = obj[path[i]];
if (!obj) return false;
};
return true;
}
In case you are writing JavaScript for Node.js, then there is an assert module with a 'deepEqual' method:
const assert = require('assert');
assert.deepEqual(testedObject, {
innerObject:{
deepObject:{
value:'Here am I'
}
}
});
I have created a very simple function for this using the recursive and happy flow coding strategy. It is also nice to add it to the Object.prototype (with enumerate:false!!) in order to have it available for all objects.
function objectHasOwnNestedProperty(obj, keys)
{
if (!obj || typeof obj !== 'object')
{
return false;
}
if(typeof keys === 'string')
{
keys = keys.split('.');
}
if(!Array.isArray(keys))
{
return false;
}
if(keys.length == 0)
{
return Object.keys(obj).length > 0;
}
var first_key = keys.shift();
if(!obj.hasOwnProperty(first_key))
{
return false;
}
if(keys.length == 0)
{
return true;
}
return objectHasOwnNestedProperty(obj[first_key],keys);
}
Object.defineProperty(Object.prototype, 'hasOwnNestedProperty',
{
value: function () { return objectHasOwnNestedProperty(this, ...arguments); },
enumerable: false
});
I'm trying to validate a JSON object with node.js. Basically, if condition A is present then I want to make sure that a particular value is in an array which may not be present. I do this in python using dictionary.get because that will return a default value if I look up something that isn't present. This is what it looks like in python
if output.get('conditionA') and not 'conditionB' in output.get('deeply', {}).get('nested', {}).get('array', []):
print "There is an error somewhere you need to be fixing."
I'd like to find a similar technique for javascript. I tried using defaults in underscore to create the keys if they aren't there but I don't think I did it right or I'm not using it the way it was intended.
var temp = _.defaults(output, {'deeply': {'nested': {'array': []}}});
if (temp.hasOwnProperty('conditionA') && temp.deeply.nested.array.indexOf('conditionB') == -1) {
console.log("There is an error somewhere you need to be fixing.");
}
It seems like if it runs into an output where one of the nested objects is missing it doesn't replace it with a default value and instead blows with a TypeError: Cannot read property 'variety' of undefined where 'variety' is the name of the array I'm looking at.
Or better yet, here's a quick wrapper that imitates the functionality of the python dictionary.
http://jsfiddle.net/xg6xb87m/4/
function pydict (item) {
if(!(this instanceof pydict)) {
return new pydict(item);
}
var self = this;
self._item = item;
self.get = function(name, def) {
var val = self._item[name];
return new pydict(val === undefined || val === null ? def : val);
};
self.value = function() {
return self._item;
};
return self;
};
// now use it by wrapping your js object
var output = {deeply: { nested: { array: [] } } };
var array = pydict(output).get('deeply', {}).get('nested', {}).get('array', []).value();
Edit
Also, here's a quick and dirty way to do the nested / multiple conditionals:
var output = {deeply: {nested: {array: ['conditionB']}}};
var val = output["deeply"]
if(val && (val = val["nested"]) && (val = val["array"]) && (val.indexOf("conditionB") >= 0)) {
...
}
Edit 2 updated the code based on Bergi's observations.
The standard technique for this in JS is (since your expected objects are all truthy) to use the || operator for default values:
if (output.conditionA && (((output.deeply || {}).nested || {}).array || []).indexOf('conditionB') == -1) {
console.log("There is an error somewhere you need to be fixing.")
}
The problem with your use of _.defaults is that it's not recursive - it doesn't work on deeply nested objects.
If you'd like something that's a little easier to use and understand, try something like this. Season to taste.
function getStructValue( object, propertyExpression, defaultValue ) {
var temp = object;
var propertyList = propertyExpression.split(".");
var isMatch = false;
for( var i=0; i<propertyList.length; ++i ) {
var value = temp[ propertyList[i] ];
if( value ) {
temp = value;
isMatch = true;
}
else {
isMatch = false;
}
}
if( isMatch ) {
return temp;
}
else {
return defaultValue;
}
}
Here's some tests:
var testData = {
apples : {
red: 3,
green: 9,
blue: {
error: "there are no blue apples"
}
}
};
console.log( getStructValue( testData, "apples.red", "No results" ) );
console.log( getStructValue( testData, "apples.blue.error", "No results" ) );
console.log( getStructValue( testData, "apples.blue.error.fail", "No results" ) );
console.log( getStructValue( testData, "apples.blue.moon", "No results" ) );
console.log( getStructValue( testData, "orange.you.glad", "No results" ) );
And the output from the tests:
$ node getStructValue.js
3
there are no blue apples
No results
No results
No results
$
You can check that a key exists easily in javascript by accessing it.
if (output["conditionA"]) {
if(output["deeply"]) {
if(output["deeply"]["nested"]) {
if(output["deeply"]["nested"]["array"]) {
if(output["deeply"]["nested"]["array"].indexOf("conditionB") !== -1) {
return;
}
}
}
}
}
console.error("There is an error somewhere you need to be fixing.");
return;
Sorry for the title but I don't know how to explain it.
The function takes an URI, eg: /foo/bar/1293. The object will, in case it exists, be stored in an object looking like {foo: { bar: { 1293: 'content...' }}}. The function iterates through the directories in the URI and checks that the path isn't undefined and meanwhile builds up a string with the code that later on gets called using eval(). The string containing the code will look something like delete memory["foo"]["bar"]["1293"]
Is there any other way I can accomplish this? Maybe store the saved content in something other than
an ordinary object?
remove : function(uri) {
if(uri == '/') {
this.flush();
return true;
}
else {
var parts = trimSlashes(uri).split('/'),
memRef = memory,
found = true,
evalCode = 'delete memory';
parts.forEach(function(dir, i) {
if( memRef[dir] !== undefined ) {
memRef = memRef[dir];
evalCode += '["'+dir+'"]';
}
else {
found = false;
return false;
}
if(i == (parts.length - 1)) {
try {
eval( evalCode );
} catch(e) {
console.log(e);
found = false;
}
}
});
return found;
}
}
No need for eval here. Just drill down like you are and delete the property at the end:
parts.forEach(function(dir, i) {
if( memRef[dir] !== undefined ) {
if(i == (parts.length - 1)) {
// delete it on the last iteration
delete memRef[dir];
} else {
// drill down
memRef = memRef[dir];
}
} else {
found = false;
return false;
}
});
You just need a helper function which takes a Array and a object and does:
function delete_helper(obj, path) {
for(var i = 0, l=path.length-1; i<l; i++) {
obj = obj[path[i]];
}
delete obj[path.length-1];
}
and instead of building up a code string, append the names to a Array and then call this instead of the eval. This code assumes that the checks to whether the path exists have already been done as they would be in that usage.
I am using custom javascript functions provided at this link (http://km0.la/js/mozXPath/) to implement particular XML functionality in FireFox.
Here is the code:
// mozXPath
// Code licensed under Creative Commons Attribution-ShareAlike License
// http://creativecommons.org/licenses/by-sa/2.5/
if( document.implementation.hasFeature("XPath", "3.0") ) {
if( typeof XMLDocument == "undefined" ) { XMLDocument = Document; }
XMLDocument.prototype.selectNodes = function(cXPathString, xNode) {
if( !xNode ) { xNode = this; }
var oNSResolver = this.createNSResolver(this.documentElement);
var aItems = this.evaluate(cXPathString, xNode, oNSResolver,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
var aResult = [];
for( var i = 0; i < aItems.snapshotLength; i++) {
aResult[i] = aItems.snapshotItem(i);
}
return aResult;
}
XMLDocument.prototype.selectSingleNode = function(cXPathString, xNode) {
if( !xNode ) { xNode = this; }
var xItems = this.selectNodes(cXPathString, xNode);
if( xItems.length > 0 ){ return xItems[0]; }
else{ return null; }
}
Element.prototype.selectNodes = function(cXPathString) {
if(this.ownerDocument.selectNodes) {
return this.ownerDocument.selectNodes(cXPathString, this);
}
else { throw "For XML Elements Only"; }
}
Element.prototype.selectSingleNode = function(cXPathString) {
if(this.ownerDocument.selectSingleNode) {
return this.ownerDocument.selectSingleNode(cXPathString, this);
}
else { throw "For XML Elements Only"; }
}
}
Assuming the XML object has been defined and loaded with XML content, here is an example of how one would access a an XML tag named "cd_rank":
var cd_rank_XMLObj = XMLObj.selectSingleNode("cd_rank");
What I want to do is add the property "nodeTypedValue" to the selectSingleNode() function, but I'm not sure how to do this. In the Element.prototype.selectSingleNode function, I tried adding:
this.prototype.nodeTypedValue = this.textContent;
However, it's giving me an error saying it's undefined. I even tried adding it outside of the function, just to dumb it down and get the concept, and it also says it's undefined:
var XMLObj.selectSingleNode.prototype.nodeTypedValue = XMLObj.textContent;
alert(XMLObj.selectSingleNode("cd_rank").nodeTypedValue);
Essentially what I'm trying to do, I suppose, is add a prototype property to a prototype function. But I need some help with this. How can i add "nodeTypedValue" such that I write "XMLObj.selectSingleNode(Path).nodeTypedValue"?
Okay, I think I figured out how to add it inside the function, probably due more to luck than logic:
Element.prototype.selectSingleNode = function(cXPathString){
if(this.ownerDocument.selectSingleNode) {
var result = this.ownerDocument.selectSingleNode(cXPathString, this);
if (result != null) {
result.nodeTypedValue = result.textContent;
}
return result;
}
else{throw "For XML Elements Only";}
}