How to check if a property contains a property - javascript

I need to check if a property contains a property, right now I am using if statements like in the example
Heres an example object
var Foo = {
"bar" :
{
"foobar":
{
"barfoo":1
}
}
}
And I need to check if barfoo exists, but first I need to check if all the other properties are there, because they might not be depending if another function has been run or not. I can't really lessen the levels of this structure either so that isn't an option.
Currently I am doing something similar to this:
var d = Foo;
if (d) {
d = d.bar;
if (d) {
d = d.foobar;
if (d) {
d = d.barfoo;
if(d){
console.log(d);
}
}
}
}

You could do it all in one if statement:
if (d && d.bar && d.bar.foobar && d.bar.foobar.barfoo)
This works because the javascript stops checking the if statement if any of the elements fail, so it doesn't error with something like cannot check property of undefined.
Otherwise you could use a try catch statement:
var barfoo;
try{
barfoo = d.bar.foobar.barfoo
}
catch(e){
barfoo = null;
}

More robust solution: check in any depth of the object
var Foo = {
"bar": {
"foobar": {
"barfoo": {
"ddd": 1
}
}
}
};
function checkProps(obj) {
var ref = obj, arg, i;
for (i = 1; i < arguments.length; i += 1) {
arg = arguments[i];
if(ref.hasOwnProperty(arg)){
ref = ref[arg]
} else {
return false;
}
}
return true;
}
//the function takes the object to search as first parameter and any other properties [,prop1,prop2,...]
console.log(checkProps(Foo, 'bar', 'foobar', 'barfoo', 'ddd'));

You can just do a single if statement with && - which does short circuit evaluation.
if (d
&& d.hasOwnProperty('bar')
&& d.bar.hasOwnProperty('foobar')
&& d.bar.foobar.hasOwnProperty('barfoo')
) {
// fancy things happen
}
The reason you use d.hasOwnProperty('bar') instead of just d.bar is in case something has polluted the object prototype.

If all you need to know is whether or not it exists, you could just do it with a try/catch
try{
if (Foo.bar.foobar.barfoo) {
//do stuff with your thingy because you know it exists
}
} catch(x) {
//you know it's no good/doesn't exist
}

Related

What's best practice to ensure JavaScript objects are set and not undefined when handling multiple leveled objects?

I'm a js developer and work in an environment where we do API calls and get some data returned. The structure of the data returned is HIGHLY inconsistent so therefor we can't assume anything about the data returned.
Picture the following scenario:
$.ajax({
success: function(data){
// Now I want to access a property 4 levels in
var length = data.results.users.length;
doSomeStuffWithLength(length);
}
})
What's the correct way to ensure data.results.users.length is not undefined? Because of the inconsistencies from the API, each level of the returned object could be broken/undefined. Do I really have to do the following:
if (data && data.results && data.results.users && data.results.users.length){
var length = data.results.users.length;
doSomeStuffWithLength(length);
}
Aren't there more elegant solutions?
You can create helper function like this.
Expect object with structure like this :
var someObj = {
some: {
other: {
third: 'bingo',
qwe: 'test'
}
}
};
Would be great to have something like
getPropByPath(someObj, 'some.other.qwe');
So the implementation of getPropByPath may looks like following:
function getPropByPath(obj, path){
var parts = path.split('.'),
root = obj;
for(var i=0; i<parts.length; i++) {
if(root[parts[i]] !== 'undefined') {
root = root[parts[i]]
} else {
return false;
}
}
return root;
}
If at all levels there may be something undefined, you should check all levels, something like:
var length = data &&
data.results &&
data.results.users &&
data.results.users.length || 0;
You can also use some helper function. Here's one:
function getPropValue ( path, defaultIfNotExisting ) {
defaultIfNotExisting = defaultIfNotExisting || 0;
path = path.split('.'), test = this;
while (path.length) {
test = test[path.shift()];
if (!test) {
return defaultIfNotExisting;
}
}
return test;
}
// usage in your case:
if ( getPropValue.call(data, 'results.users', []).length) { /* do stuff */}

Shorthand creation of object chains in Javascript

What I am interested to know is if there is a shorter way of achieving the following:
App.Plugins = App.Plugins || {};
App.Plugins.SomePlugin = App.Plugins.SomePlugin || {};
App.Plugins.SomePlugin.Models = App.Plugins.SomePlugin.Models || {};
App.Plugins.SomePlugin.Views = App.Plugins.SomePlugin.Views || {};
App.Plugins.SomePlugin.Collections = App.Plugins.SomePlugin.Collections || {};
As far as I know, this format is fine, please someone let me know if I'm mistaken, I'm just wondering if there is some nicer way of doing this initial setup on my singleton.
Thanks in advance...
You could do the following:
function defaults(obj, prop) {
return obj[prop] = obj[prop] || {};
}
defaults(App, 'Plugins');
defaults(App.Plugins, 'SomePlugin');
defaults(App.Plugins.SomePlugin, 'Models');
defaults(App.Plugins.SomePlugin, 'Views');
defaults(App.Plugins.SomePlugin, 'Collections');
I don't understand exactly why you do this
Anyway a shorter way to write that is:
App={
Plugins:{
SomePlugin:{
Models:{},
Views:{},
Collections:{}
}
}
}
then considering the function
function defaults(obj, prop) {
return obj[prop] = obj[prop] || {};
}
would return an error using
defaults(App.Plugins.AnotherPlugin,'Models')
checking this is a pain:
var x={};
if(App&&
App.Plugins&&
App.Plugins.AnotherPlugin&&
App.Plugins.AnotherPlugin.Models
){
x=App.Plugins.AnotherPlugin.Models
}
console.log(x);
A solution is
var x={};
try{x=App.Plugins.AnotherPlugin.Models}catch(e){}
console.log(x)
this gives you no errors
but you can't set it the easy way.
EDIT
comment answer
Then you should start checking at the point where nothing is certain. In your case you just need to check if anotherPlugin exists.you probably already have App & App.Plugins.so you don't need App=App||{}, but only App.Plugins.AnotherPlugin
!App.Plugins.AnotherPlugin||App.Plugins.AnotherPlugin=NewPlugin
or a function
function addPlugin(name,newPlugin){
!App.Plugins[name]||App.Plugins[name]=newPlugin
}
An define your own standards... I mean why return an object if it does not exist?
if it does not exist you can't do anything anyway.
and again the biggest problem is always to check if it exists... and like i already described above it is try catch.
EDIT2
check this function.
function def(a,b,c,d){
c=b.split('.');
d=c.shift();
a[d]||(a[d]={});
!(c.length>0)||def(a[d],c.join('.'));
}
usage:
var A={};
def(A,'B.C.D.E.F')
//this transforms your {}
//to
A:{
B:{
C:{
D:{
E:{
F:{
}
}
}
}
}
}
http://jsfiddle.net/5NgWL/
to create your plugin:
var App={}
def(App,'Plugins.SomePlugin.Models')
def(App.Plugins.SomePlugin,'View')
// &/or
def(App,'Plugins.SomePlugin.Collections')
May be use it
function namespace(path) {
var segments = path.split('.'),
result = {};
function define(name, obj) {
if (name === '.') {
return obj;
}
!obj[name] && (obj[name] = {});
return define(segments.shift(), obj[name]);
}
segments.push('.'); //add stop symbol;
define(segments.shift(), result);
return result;
}
namespace('App.Plugins.SomePlugin.Collections').controller = function() {}

Any ways to short-up such chain call?

Is there any ways to short-up such chain call?
if (obj && obj.prop && obj.prop.subProp1 && obj.prop.subProp1.subPropFunc) {
obj.prop.subProp1.subPropFunc();
}
The only alternative I can imagine is try-catch. Any other ideas?
*I really tired of writing these. It's much easier in coffeescript using ?..
This should work given your sample code (haven't tested "all cases", just a copy of your sample):
function propsExist(obj) {
if (!obj) return false;
for (var i = 1; i < arguments.length; i++) {
if (!obj[arguments[i]]) return false;
obj = obj[arguments[i]];
}
return true;
}
if (propsExist(obj, "prop", "subProp1", "subPropFunc")) {
obj.prop.subProp1.subPropFunc();
}
The method propsExist() takes a variable number of arguments, the first of which being the original object you want to check properties/functions on. It will iterate through the list of properties you send to it and check them in-order. If one doesn't exist, it will return false. If it makes it through the whole loop, it validated successfully!
If you always want to call the sub-property's function if it validates, you could also just change the propsExist function to call it instead of returning true (then rename the function to something like callIfValid(obj, ...)
Same idea as the previous post, just a different solution.
function checkChain(variablePath,startingPoint){
var check = startingPoint || window,
parts = variablePath.split("."),
i;
for (i=0;i<parts.length;i++) {
check = check[parts[i]];
if (!check) {
return null;
}
}
return check;
}
var foo = { bar : { cat : { says : function(x){ alert(x); } } } };
var test1 = checkChain("foo.bar.cat.says");
if (test1) {
test1("meow");
}
var test2 = checkChain("foo.bar.cat.bark");
if (test2) {
test2("burp");
}
var test3 = checkChain("cat.says",foo.bar);
if (test3) {
test3("huh?");
}

How to check for a JavaScript Object given it's name as a string?

I'm having trouble figuring out how I can take a string of an object name and check if that object actually exists.
What I'm trying to accomplish is have an array the defines the required objects for a particular JavaScript "module" to work, for instance:
var requiredImports = ['MyApp.Object1', 'MyApp.Object2'];
Then using requiredImports, I want to loop over them and check if the are defined. Without using the above array, I can do the following which is what I'm trying to accomplish:
if (MyApp.Object1 == undefined) {
alert('Missing MyApp.Object1');
}
But using the above, I'd have to hard code this for every module rather than making a generic method that I can just pass it an array of strings and have it effectively do the same check for me.
I tried doing this by just passing it the objects themselves such as:
var requiredImports = [MyApp.Object1, MyApp.Object2];
But that throws a JavaScript error when those objects do not exist, which is what I'm trying to catch.
var MyApp = {
Object1: {}
};
function exists(varName, scope) {
var parent = scope || window;
try {
varName.split('.').forEach(function (name) {
if (parent[name] === undefined) {
throw 'undefined';
}
parent = parent[name];
});
}
catch (ex) {
return false;
}
return true;
}
console.log(
exists('MyApp.Object1'), // true
exists('MyApp.Object2'), // false
exists('window'), // true
exists('document'), // true
exists('window.document') // true
);
// or
console.log(
['MyApp.Object1', 'MyApp.Object2', 'window', 'document', 'window.document'].filter(function (varName) {
return !exists(varName);
})
);
// => ["MyApp.Object2"]
Note: that forEach is ES5 and as such not implemented in some browsers. But if you'd go with this solution, there is a nice polyfill here.
You can check for definedness with
if ( typeof window['MyApp'] === 'undefined' ||
typeof window['MyApp']['Object1'] === 'undefined' )
{
alert('Missing MyApp.Object1');
}
and so on.
Assuming MyApp.Object1 is a global scope, window is the parent object and since that is the top level object, you don't need to prefix your global vars with it. So window.MyApp.Object1 is the same as MyApp.Object1 (again, assuming this is within global scope).
Also, in javascript, MyApp['Object1'] is the same as MyApp.Object1. So if we apply this principle to the main window object, you can check for window['MyApp'] or window['MyApp']['Object1'] and the key here is that you can replace 'MyApp' and 'Object1' with a variable.
Example:
/* check if a variable/object exists in the global scope) */
function checkIfExists(someVar) {
if (typeof(window[someVar]) == 'undefined')
return true;
return false;
}
var foo = 'bar';
alert(checkIfExists('foo'));
You can evaluate your custom expression in JavaScript. Consider the code below:
var MyApp = {
Object1: "foo",
Object2: "bar"
};
var IsExists = function(varName) {
return new Function('return typeof(' + varName + ') === "undefined" ? false : true;')();
};
USAGE
var requiredImports = ['MyApp.Object1', 'MyApp.Object2'];
for (var i = 0; i < requiredImports.length; i++)
{
alert(requiredImports[i] + ": " + IsExists(requiredImports[i]))
}
You only get error for first level (MyApp in your example). I assume you have only a few first-level requires, so check them manually by window[x] which does not throw:
var requiredTopLevel = ['MyApp'];
for (var i = 0; i < requiredTopLevel.length; ++i) {
if ("undefined" === typeof window[requiredTopLevel[i]]) {
// problem with requiredTopLevel[i]
}
}
and then, to check nested requires (if top-level is present) you can use the values without fear. For example this will work:
var requiredNested = { 'Object1':MyApp.Object1, 'Object2':Myapp.Object2 };
for (var name in requiredNested) {
if ("undefined" === typeof requiredNested[name]) {
// problem with name
}
}

If/else condition inside an Object

function Validator(formIsValid) {
if(this.formIsValid) {
alert('Form is valid!');
}
else {
alert('Form is invalid...');
}
}
Validator.prototype = { // Notice the .prototype here, it's important!
formIsValid: true,
enforceTextFieldMinLength: function(field, minLength) {
if (!field.value || field.value.length < minLength) {
this.formIsValid = false;
}
},
enforceLabelHasText: function(label) {
if (!label.text) {
this.formIsValid = false;
}
}
}
//var val = new Validator();
The above is my Val.js. This is how i am using in my otherFile.js
AddPatient.Firstname = FirstNameValue || Validator.enforceLabelHasText(FirstName);
I get an error saying cannot find function enforceLabelHasText in Object function Validator(formIsValid)
You can't put expressions in an object definition. If you want code to be executed after an object instance is created, you should use:
function Validator() {
if(this.formIsValid) {
alert('Form is valid!');
}
else {
alert('Form is invalid...');
}
}
Validator.prototype = { // Notice the .prototype here, it's important!
formIsValid: true,
enforceTextFieldMinLength: function(field, minLength) {
if (!field.value || field.value.length < minLength) {
this.formIsValid = false;
}
},
enforceLabelHasText: function(label) {
if (!label.text) {
this.formIsValid = false;
}
}
}
var a = new Validator();
This is a dummy solution; you will want to add arguments to the Validator() function, to initialize formIsValid and the other values. I suggest you should read the MDC's description on prototypes.
EDIT: If you went with the prototype solution, you need to call val.enforceLabelHasText(FirstName), after making val a global variable (either by omitting the var or by using var window.val = new Validator()).
This is not valid syntax.
You've dumped an if/else condition inside an object definition, like this:
var myObj = { a, b, c, d,
if (true) {
alert('WTF!');
}
};
Procedural code like this must be inside a function.
You can insert logic into an object literal, using an iife. Like this;
const testable = 1
const obj = {
a: 'value1',
b: (() => {
if (testable === 1) {
return 'testable was 1'
} else {
return 'testable was not 1'
}
})()
}
console.log(obj)
Validator is an object literal and you can only assign properties there, not arbitrary code.
You could assign a function which includes your code to a property.
Bind this to a variable in the beginning.
var that = this;
This keeps this changing and point to something else.
And use firebug!

Categories