869

If I have a reference to an object:

var test = {};

that will potentially (but not immediately) have nested objects, something like:

{level1: {level2: {level3: "level3"}}};

What is the best way to check for the existence of property in deeply nested objects?

alert(test.level1); yields undefined, but alert(test.level1.level2.level3); fails.

I’m currently doing something like this:

if(test.level1 && test.level1.level2 && test.level1.level2.level3) {
    alert(test.level1.level2.level3);
}

but I was wondering if there’s a better way.

9

64 Answers 64

723
+500

You have to do it step by step if you don't want a TypeError because if one of the members is null or undefined, and you try to access a member, an exception will be thrown.

You can either simply catch the exception, or make a function to test the existence of multiple levels, something like this:

function checkNested(obj /*, level1, level2, ... levelN*/) {
  var args = Array.prototype.slice.call(arguments, 1);

  for (var i = 0; i < args.length; i++) {
    if (!obj || !obj.hasOwnProperty(args[i])) {
      return false;
    }
    obj = obj[args[i]];
  }
  return true;
}

var test = {level1:{level2:{level3:'level3'}} };

checkNested(test, 'level1', 'level2', 'level3'); // true
checkNested(test, 'level1', 'level2', 'foo'); // false

ES6 UPDATE:

Here is a shorter version of the original function, using ES6 features and recursion (it's also in proper tail call form):

function checkNested(obj, level,  ...rest) {
  if (obj === undefined) return false
  if (rest.length == 0 && obj.hasOwnProperty(level)) return true
  return checkNested(obj[level], ...rest)
}

However, if you want to get the value of a nested property and not only check its existence, here is a simple one-line function:

function getNested(obj, ...args) {
  return args.reduce((obj, level) => obj && obj[level], obj)
}

const test = { level1:{ level2:{ level3:'level3'} } };
console.log(getNested(test, 'level1', 'level2', 'level3')); // 'level3'
console.log(getNested(test, 'level1', 'level2', 'level3', 'length')); // 6
console.log(getNested(test, 'level1', 'level2', 'foo')); // undefined
console.log(getNested(test, 'a', 'b')); // undefined

The above function allows you to get the value of nested properties, otherwise will return undefined.

UPDATE 2019-10-17:

The optional chaining proposal reached Stage 3 on the ECMAScript committee process, this will allow you to safely access deeply nested properties, by using the token ?., the new optional chaining operator:

const value = obj?.level1?.level2?.level3 

If any of the levels accessed is null or undefined the expression will resolve to undefined by itself.

The proposal also allows you to handle method calls safely:

obj?.level1?.method();

The above expression will produce undefined if obj, obj.level1, or obj.level1.method are null or undefined, otherwise it will call the function.

You can start playing with this feature with Babel using the optional chaining plugin.

Since Babel 7.8.0, ES2020 is supported by default

Check this example on the Babel REPL.

🎉🎉UPDATE: December 2019 🎉🎉

The optional chaining proposal finally reached Stage 4 in the December 2019 meeting of the TC39 committee. This means this feature will be part of the ECMAScript 2020 Standard.

21
  • 4
    arguments is not actually an array. Array.prototype.slice.call(arguments) converts it to a formal array. Learn
    – deefour
    Nov 10, 2012 at 1:00
  • 24
    this'd be a lot more efficient to do var obj = arguments[0]; and start from var i = 1 instead of copying the arguments object
    – Claudiu
    Oct 31, 2013 at 19:45
  • 2
    I put together a version with try/catch for austerity sake, and no surprise - performance is awful (except in Safari for some reason). There are some answers below that are pretty performant, along with Claudiu's modification which is also significantly more performant than selected answer. See jsperf here jsperf.com/check-if-deep-property-exists-with-willnotthrow
    – netpoetica
    Nov 27, 2014 at 5:35
  • 3
    In ES6 the args variable declaration can be removed and and ...args can be used as the second argument for the checkNested method. developer.mozilla.org/en/docs/Web/JavaScript/Reference/…
    – Vernon
    Dec 28, 2016 at 15:49
  • 10
    This is a very unmaintainable. If any property keys change (they will), all devs on the project would have to 'string search' the entire codebase. This isn't really a solution to the problem, as it introduces a much bigger problem
    – Drenai
    Jan 14, 2018 at 11:20
379

Here is a pattern I picked up from Oliver Steele:

var level3 = (((test || {}).level1 || {}).level2 || {}).level3;
alert( level3 );

In fact that whole article is a discussion of how you can do this in javascript. He settles on using the above syntax (which isn't that hard to read once you get used to it) as an idiom.

13
  • 8
    @wared I think it is interesting mostly for how concise it is. There is a detailed discussion of the performance characteristics in the linked post. Yes it always does all the tests, but it avoids creating temp vars, and you can alias {} to a var if you want to prevent the overhead of creating a new empty object each time. In 99% of cases I would not expect speed to matter, and in cases where it does there is no substitute for profiling. Sep 5, 2013 at 18:13
  • 9
    @MuhammadUmer No, the point of (test || {}) is that if test is undefined, then you're doing ({}.level1 || {}). Of course, {}.level1 is undefined, so that means you're doing {}.level2, and so on. Apr 28, 2015 at 16:06
  • 3
    @JoshuaTaylor: I think he means if test is not declared, there'll be a ReferenceError, but that's not a problem, because if it's not declared, there's a bug to be fixed, so the error is a good thing.
    – user1106925
    Jan 2, 2016 at 16:15
  • 43
    you said "which isn't that hard to read once you get used to it". Well, these are signs you know already this is a mess. Then why suggest this solution? It is prone to typos and gives absolutely nothing to readability. Just look it! If i have to write an ugly line, it should asswell be readable; so i'm going to just stick with if(test.level1 && test.level1.level2 && test.level1.level2.level3)
    – Sharky
    Sep 30, 2016 at 9:16
  • 11
    Unless I'm missing something, this won't work for boolean end-properties that might be false... sadly. Otherwise I love this idiom.
    – T3db0t
    Nov 17, 2016 at 20:01
290

Update

Looks like lodash has added _.get for all your nested property getting needs.

_.get(countries, 'greece.sparta.playwright')

https://lodash.com/docs#get


Previous answer

lodash users may enjoy lodash.contrib which has a couple methods that mitigate this problem.

getPath

Signature: _.getPath(obj:Object, ks:String|Array)

Gets the value at any depth in a nested object based on the path described by the keys given. Keys may be given as an array or as a dot-separated string. Returns undefined if the path cannot be reached.

var countries = {
        greece: {
            athens: {
                playwright:  "Sophocles"
            }
        }
    }
};

_.getPath(countries, "greece.athens.playwright");
// => "Sophocles"

_.getPath(countries, "greece.sparta.playwright");
// => undefined

_.getPath(countries, ["greece", "athens", "playwright"]);
// => "Sophocles"

_.getPath(countries, ["greece", "sparta", "playwright"]);
// => undefined
7
  • Lodash really needs a _.isPathDefined(obj, pathString) method. Jan 9, 2015 at 16:34
  • @MatthewPayne It'd be nice perhaps, but it really isn't necessary. You could do it yourself really easily function isPathDefined(object, path) { return typeof _.getPath(object, path) !== 'undefined'; }
    – Vala
    May 12, 2015 at 11:33
  • 13
    Lodash has this same functionality itself: _.get(countries, 'greece.sparta.playwright', 'default'); // → 'default' _.has(countries, 'greece.spart.playwright') // → false
    – Tom
    May 15, 2015 at 18:23
  • even better would be _.result Aug 29, 2015 at 8:50
  • If you need to determine multiple different paths consider: var url = _.get(e, 'currentTarget.myurl', null) || _.get(e, 'currentTarget.attributes.myurl.nodeValue', null) || null May 4, 2017 at 4:37
234

I have done performance tests (thank you cdMinix for adding lodash) on some of the suggestions proposed to this question with the results listed below.

Disclaimer #1 Turning strings into references is unnecessary meta-programming and probably best avoided. Don't lose track of your references to begin with. Read more from this answer to a similar question.

Disclaimer #2 We are talking about millions of operations per millisecond here. It is very unlikely any of these would make much difference in most use cases. Choose whichever makes the most sense knowing the limitations of each. For me I would go with something like reduce out of convenience.

Object Wrap (by Oliver Steele) – 34 % – fastest

var r1 = (((test || {}).level1 || {}).level2 || {}).level3;
var r2 = (((test || {}).level1 || {}).level2 || {}).foo;

Original solution (suggested in question) – 45%

var r1 = test.level1 && test.level1.level2 && test.level1.level2.level3;
var r2 = test.level1 && test.level1.level2 && test.level1.level2.foo;

checkNested – 50%

function checkNested(obj) {
  for (var i = 1; i < arguments.length; i++) {
    if (!obj.hasOwnProperty(arguments[i])) {
      return false;
    }
    obj = obj[arguments[i]];
  }
  return true;
}

get_if_exist – 52%

function get_if_exist(str) {
    try { return eval(str) }
    catch(e) { return undefined }
}

validChain – 54%

function validChain( object, ...keys ) {
    return keys.reduce( ( a, b ) => ( a || { } )[ b ], object ) !== undefined;
}

objHasKeys – 63%

function objHasKeys(obj, keys) {
  var next = keys.shift();
  return obj[next] && (! keys.length || objHasKeys(obj[next], keys));
}

nestedPropertyExists – 69%

function nestedPropertyExists(obj, props) {
    var prop = props.shift();
    return prop === undefined ? true : obj.hasOwnProperty(prop) ? nestedPropertyExists(obj[prop], props) : false;
}

_.get – 72%

deeptest – 86%

function deeptest(target, s){
    s= s.split('.')
    var obj= target[s.shift()];
    while(obj && s.length) obj= obj[s.shift()];
    return obj;
}

sad clowns – 100% – slowest

var o = function(obj) { return obj || {} };

var r1 = o(o(o(o(test).level1).level2).level3);
var r2 = o(o(o(o(test).level1).level2).foo);
7
  • 19
    it should be noted that the more % a test has - the SLOWER it is
    – avalanche1
    Feb 3, 2017 at 9:12
  • 2
    what about lodash _.get() ? how performant is it comparing to those answers?
    – beniutek
    May 31, 2017 at 14:07
  • 1
    Each method of these is slower or faster than other ones depending on situation. If all keys are found then "Object Wrap" could be fastest, but if one of the keys is not found then "Native solution/Original solution" could be faster.
    – evilReiko
    Aug 28, 2017 at 6:55
  • 1
    @evilReiko Any method will be slower if no keys are found but in proportion to each other it's still pretty much the same. However, you are right – this is more of an intellectual exercise than anything else. We are talking about a million iterations per millisecond here. I see no use case where it would make much difference. Me personally I would go for reduce or try/catch out of convenience.
    – unitario
    Aug 30, 2017 at 6:36
  • How performant is it compared to try { test.level1.level2.level3 } catch (e) { // some logger e }
    – Lex
    Nov 2, 2018 at 2:23
46

You can read an object property at any depth, if you handle the name like a string: 't.level1.level2.level3'.

window.t={level1:{level2:{level3: 'level3'}}};

function deeptest(s){
    s= s.split('.')
    var obj= window[s.shift()];
    while(obj && s.length) obj= obj[s.shift()];
    return obj;
}

alert(deeptest('t.level1.level2.level3') || 'Undefined');

It returns undefined if any of the segments is undefined.

1
28
var a;

a = {
    b: {
        c: 'd'
    }
};

function isset (fn) {
    var value;
    try {
        value = fn();
    } catch (e) {
        value = undefined;
    } finally {
        return value !== undefined;
    }
};

// ES5
console.log(
    isset(function () { return a.b.c; }),
    isset(function () { return a.b.c.d.e.f; })
);

If you are coding in ES6 environment (or using 6to5) then you can take advantage of the arrow function syntax:

// ES6 using the arrow function
console.log(
    isset(() => a.b.c),
    isset(() => a.b.c.d.e.f)
);

Regarding the performance, there is no performance penalty for using try..catch block if the property is set. There is a performance impact if the property is unset.

Consider simply using _.has:

var object = { 'a': { 'b': { 'c': 3 } } };

_.has(object, 'a');
// → true

_.has(object, 'a.b.c');
// → true

_.has(object, ['a', 'b', 'c']);
// → true
1
  • 2
    I think the try-catch approach is the best answer. There's a philosophical difference between querying an object for its type, and assuming the API exists and failing accordingly if it doesn't. The latter is more appropriate in loosely typed languages. See stackoverflow.com/a/408305/2419669. The try-catch approach is also far clearer than if (foo && foo.bar && foo.bar.baz && foo.bar.baz.qux) { ... }. Jan 31, 2016 at 3:39
23

You can also use tc39 optional chaining proposal together with babel 7 - tc39-proposal-optional-chaining

Code would look like this:

  const test = test?.level1?.level2?.level3;
  if (test) alert(test);
3
  • Note that this syntax will almost certainly change, as some TC39 members have objections.
    – jhpratt
    Sep 24, 2018 at 1:59
  • Probably but this will be available in some form in time, and that's the only thing that matters .. It's one of the features I miss the most in JS.
    – Goran.it
    Sep 24, 2018 at 7:00
  • The syntax did not change and has full support in all major browser latest versions - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    – jave.web
    Oct 3, 2022 at 15:01
21

how about

try {
   alert(test.level1.level2.level3)
} catch(e) {
 ...whatever

}
6
  • 16
    I don't think try/catch is a good way to test for existence of an object: try/catch is meant to handle exceptions, not normal conditions such as the test here. I think (typeof foo == "undefined") at each step is better -- and in general, there's probably some refactoring required if you're working with such deeply nested properties. Also, try/catch will cause a break in Firebug (and in any browser where break-on-error is turned on) if an exception is thrown.
    – Sam Dutton
    Nov 9, 2010 at 12:00
  • I vote on this, because browser will check the existence twice if you use other solutions. Lets say you want to call ´a.c.b = 2´. Browser has to check the existence before modifying the value (otherwise it would be a memory error caught by OS).
    – user669677
    Sep 2, 2013 at 12:04
  • 4
    The question still remain: witch one is faster for browsers to set up a try catch or call hasOwnProperty() n times?
    – user669677
    Sep 2, 2013 at 12:12
  • 15
    Why is this bad again? This looks cleanest to me. Jun 4, 2014 at 19:26
  • I would say: If you expect that the property exist than it is okay to wrap it into a try block. If it then doesn't exist it is an error. But if you're just lazy and put regular code into the catch block for the case that the property doesn't exist try/catch is misused. Here a if/else or something similar is required.
    – robsch
    Aug 9, 2016 at 13:55
20

ES6 answer, thoroughly tested :)

const propExists = (obj, path) => {
    return !!path.split('.').reduce((obj, prop) => {
        return obj && obj[prop] ? obj[prop] : undefined;
    }, obj)
}

→see Codepen with full test coverage

8
  • 1
    I made your tests failed setting the value of the flat prop to 0. You must care about type coercion.
    – germain
    Oct 2, 2018 at 7:13
  • @germain Does this work for you? (I explicitly compare === for the different falsys, and added test. If you have a better idea, let me know).
    – Frank N
    Oct 2, 2018 at 11:22
  • I made your tests failed again setting the value of the flat prop to false. And then you might want to have a value in your object set to undefined (I know it's weird but is is JS). I made a positive false value set to 'Prop not Found': const hasTruthyProp = prop => prop === 'Prop not found' ? false : true const path = obj => path => path.reduce((obj, prop) => { return obj && obj.hasOwnProperty(prop) ? obj[prop] : 'Prop not found' }, obj) const myFunc = compose(hasTruthyProp, path(obj))
    – germain
    Oct 2, 2018 at 15:19
  • Can you fork my codepen (top-right, easy), correct & add tests, and send me the URL of yours? Thanks =)
    – Frank N
    Oct 3, 2018 at 18:16
  • 1
    It's irresponsible to leave this unedited after three years. This easily fails on falsy values as @germain pointed out. If this was thoroughly tested, you have some buggy code.
    – Regular Jo
    Jun 11, 2021 at 3:25
18

This question is old. Today you can use Optional chaining (?.)

let value = test?.level1?.level2?.level3;

Source:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

1
11

I tried a recursive approach:

function objHasKeys(obj, keys) {
  var next = keys.shift();
  return obj[next] && (! keys.length || objHasKeys(obj[next], keys));
}

The ! keys.length || kicks out of the recursion so it doesn't run the function with no keys left to test. Tests:

obj = {
  path: {
    to: {
      the: {
        goodKey: "hello"
      }
    }
  }
}

console.log(objHasKeys(obj, ['path', 'to', 'the', 'goodKey'])); // true
console.log(objHasKeys(obj, ['path', 'to', 'the', 'badKey']));  // undefined

I am using it to print a friendly html view of a bunch of objects with unknown key/values, e.g.:

var biosName = objHasKeys(myObj, 'MachineInfo:BiosInfo:Name'.split(':'))
             ? myObj.MachineInfo.BiosInfo.Name
             : 'unknown';
10

I think the following script gives more readable representation.

declare a function:

var o = function(obj) { return obj || {};};

then use it like this:

if (o(o(o(o(test).level1).level2).level3)
{

}

I call it "sad clown technique" because it is using sign o(


EDIT:

here is a version for TypeScript

it gives type checks at compile time (as well as the intellisense if you use a tool like Visual Studio)

export function o<T>(someObject: T, defaultValue: T = {} as T) : T {
    if (typeof someObject === 'undefined' || someObject === null)
        return defaultValue;
    else
        return someObject;
}

the usage is the same:

o(o(o(o(test).level1).level2).level3

but this time intellisense works!

plus, you can set a default value:

o(o(o(o(o(test).level1).level2).level3, "none")
7
  • 2
    °0o <°(())))><
    – Daniel W.
    Nov 17, 2016 at 14:23
  • 2
    I like this one, because it is honest and throws an "undefined" in your face when you don't know your Object type. +1.
    – user10675354
    Jan 8, 2019 at 12:40
  • 2
    As long as you keep the statement in parens you can also call it happy clown technique (o
    – Sventies
    Jan 22, 2019 at 14:06
  • Thanks Sventies. I love your comment . It is quite nice angle to look from - such conditions are mostly used in "ifs" and always surrounded with external brackets. So, yes, it is mostly a happy clown indeed :))) Jan 22, 2019 at 22:38
  • You really need to be in love with parenthesis to go for this one...
    – Bastien7
    Feb 10, 2020 at 9:11
9

create a global function and use in whole project

try this

function isExist(arg){
   try{
      return arg();
   }catch(e){
      return false;
   }
}

let obj={a:5,b:{c:5}};

console.log(isExist(()=>obj.b.c))
console.log(isExist(()=>obj.b.foo))
console.log(isExist(()=>obj.test.foo))

if condition

if(isExist(()=>obj.test.foo)){
   ....
}
1
  • This swallows any other error that may occur.
    – Clashsoft
    Dec 9, 2021 at 13:52
8

I didn't see any example of someone using Proxies

So I came up with my own. The great thing about it is that you don't have to interpolate strings. You can actually return a chain-able object function and do some magical things with it. You can even call functions and get array indexes to check for deep objects

function resolve(target) {
  var noop = () => {} // We us a noop function so we can call methods also
  return new Proxy(noop, {
    get(noop, key) {
      // return end result if key is _result
      return key === '_result' 
        ? target 
        : resolve( // resolve with target value or undefined
            target === undefined ? undefined : target[key]
          )
    },

    // if we want to test a function then we can do so alos thanks to using noop
    // instead of using target in our proxy
    apply(noop, that, args) {
      return resolve(typeof target === 'function' ? target.apply(that, args) : undefined)
    },
  })
}

// some modified examples from the accepted answer
var test = {level1: {level2:() => ({level3:'level3'})}}
var test1 = {key1: {key2: ['item0']}}

// You need to get _result in the end to get the final result

console.log(resolve(test).level1.level2().level3._result)
console.log(resolve(test).level1.level2().level3.level4.level5._result)
console.log(resolve(test1).key1.key2[0]._result)
console.log(resolve(test1)[0].key._result) // don't exist

The above code works fine for synchronous stuff. But how would you test something that is asynchronous like this ajax call? How do you test that?

fetch('https://httpbin.org/get')
.then(function(response) {
  return response.json()
})
.then(function(json) {
  console.log(json.headers['User-Agent'])
})

sure you could use async/await to get rid of some callbacks. But what if you could do it even more magically? something that looks like this:

fetch('https://httpbin.org/get').json().headers['User-Agent']

You probably wonder where all the promise & .then chains are... this could be blocking for all that you know... but using the same Proxy technique with promise you can actually test deeply nested complex path for it existence without ever writing a single function

function resolve(target) { 
  return new Proxy(() => {}, {
    get(noop, key) {
      return key === 'then' ? target.then.bind(target) : resolve(
        Promise.resolve(target).then(target => {
          if (typeof target[key] === 'function') return target[key].bind(target)
          return target[key]
        })
      )
    },

    apply(noop, that, args) {
      return resolve(target.then(result => {
        return result.apply(that, args)
      }))
    },
  })
}

// this feels very much synchronous but are still non blocking :)
resolve(window) // this will chain a noop function until you call then()
  .fetch('https://httpbin.org/get')
  .json()
  .headers['User-Agent']
  .then(console.log, console.warn) // you get a warning if it doesn't exist
  
// You could use this method also for the first test object
// also, but it would have to call .then() in the end



// Another example
resolve(window)
  .fetch('https://httpbin.org/get?items=4&items=2')
  .json()
  .args
  .items
  // nice that you can map an array item without even having it ready
  .map(n => ~~n * 4) 
  .then(console.log, console.warn) // you get a warning if it doesn't exist

1
  • If someone is interested, I've publish the async version on npm
    – Endless
    Sep 4, 2017 at 12:09
6

You can try Optional chaining (but be careful of browser compatibility).

let test = {level1: {level2: {level3: 'level3'}}};

let level3 = test?.level1?.level2?.level3;
console.log(level3); // level3

level3 = test?.level0?.level1?.level2?.level3;
console.log(level3); // undefined

There is a babel plugin(@babel/plugin-proposal-optional-chaining) for optinal chaning. So, please upgrade your babel if necessary.

5

One simple way is this:

try {
    alert(test.level1.level2.level3);
} catch(e) {
    alert("undefined");    // this is optional to put any output here
}

The try/catch catches the cases for when any of the higher level objects such as test, test.level1, test.level1.level2 are not defined.

0
5

Based on this answer, I came up with this generic function using ES2015 which would solve the problem

function validChain( object, ...keys ) {
    return keys.reduce( ( a, b ) => ( a || { } )[ b ], object ) !== undefined;
}

var test = {
  first: {
    second: {
        third: "This is not the key your are looking for"
    }
  }
}

if ( validChain( test, "first", "second", "third" ) ) {
    console.log( test.first.second.third );
}
1
  • 1
    Here is my final approach function validChain (object, path) { return path.split('.').reduce((a, b) => (a || { })[b], object) !== undefined } Nov 10, 2017 at 21:45
5

I have created a little function to get nested object properties safely.

function getValue(object, path, fallback, fallbackOnFalsy) {
    if (!object || !path) {
        return fallback;
    }

    // Reduces object properties to the deepest property in the path argument.
    return path.split('.').reduce((object, property) => {
       if (object && typeof object !== 'string' && object.hasOwnProperty(property)) {
            // The property is found but it may be falsy.
            // If fallback is active for falsy values, the fallback is returned, otherwise the property value.
            return !object[property] && fallbackOnFalsy ? fallback : object[property];
        } else {
            // Returns the fallback if current chain link does not exist or it does not contain the property.
            return fallback;
        }
    }, object);
}

Or a simpler but slightly unreadable version:

function getValue(o, path, fb, fbFalsy) {
   if(!o || !path) return fb;
   return path.split('.').reduce((o, p) => o && typeof o !== 'string' && o.hasOwnProperty(p) ? !o[p] && fbFalsy ? fb : o[p] : fb, o);
}

Or even shorter but without fallback on falsy flag:

function getValue(o, path, fb) {
   if(!o || !path) return fb;
   return path.split('.').reduce((o, p) => o && typeof o !== 'string' && o.hasOwnProperty(p) ? o[p] : fb, o);
}

I have test with:

const obj = {
    c: {
        a: 2,
        b: {
            c: [1, 2, 3, {a: 15, b: 10}, 15]
        },
        c: undefined,
        d: null
    },
    d: ''
}

And here are some tests:

// null
console.log(getValue(obj, 'c.d', 'fallback'));

// array
console.log(getValue(obj, 'c.b.c', 'fallback'));

// array index 2
console.log(getValue(obj, 'c.b.c.2', 'fallback'));

// no index => fallback
console.log(getValue(obj, 'c.b.c.10', 'fallback'));

To see all the code with documentation and the tests I've tried you can check my github gist: https://gist.github.com/vsambor/3df9ad75ff3de489bbcb7b8c60beebf4#file-javascriptgetnestedvalues-js

0
5

I have used this function for access properties of the deeply nested object and it working for me...

this is the function

/**
 * get property of object
 * @param obj object
 * @param path e.g user.name
 */
getProperty(obj, path, defaultValue = '-') {
  const value = path.split('.').reduce((o, p) => o && o[p], obj);

  return value ? value : defaultValue;
}

this is how I access the deeply nested object property

{{ getProperty(object, 'passengerDetails.data.driverInfo.currentVehicle.vehicleType') }}
4

A shorter, ES5 version of @CMS's excellent answer:

// Check the obj has the keys in the order mentioned. Used for checking JSON results.  
var checkObjHasKeys = function(obj, keys) {
  var success = true;
  keys.forEach( function(key) {
    if ( ! obj.hasOwnProperty(key)) {
      success = false;
    }
    obj = obj[key];
  })
  return success;
}

With a similar test:

var test = { level1:{level2:{level3:'result'}}};
utils.checkObjHasKeys(test, ['level1', 'level2', 'level3']); // true
utils.checkObjHasKeys(test, ['level1', 'level2', 'foo']); // false
3
  • the only issue with this is if there are multiple levels of undefined keys, then you get a TypeError, e.g. checkObjHasKeys(test, ['level1', 'level2', 'asdf', 'asdf']);
    – JKS
    Jul 19, 2012 at 17:34
  • 1
    A more suitable method is every, whose value can be returned directly.
    – RobG
    Aug 12, 2015 at 11:59
  • Maybe change success = false; to return false. You should bail out once you know it breaks, nothing deeper can exist once it's null or undefined. This would prevent the errors on the deeper nested items, since they obviously don't exist either.
    – Wade
    Nov 4, 2016 at 20:16
4

I was looking for the value to be returned if the property exists, so I modified the answer by CMS above. Here's what I came up with:

function getNestedProperty(obj, key) {
  // Get property array from key string
  var properties = key.split(".");

  // Iterate through properties, returning undefined if object is null or property doesn't exist
  for (var i = 0; i < properties.length; i++) {
    if (!obj || !obj.hasOwnProperty(properties[i])) {
      return;
    }
    obj = obj[properties[i]];
  }

  // Nested property found, so return the value
  return obj;
}


Usage:

getNestedProperty(test, "level1.level2.level3") // "level3"
getNestedProperty(test, "level1.level2.foo") // undefined

3

The answer given by CMS works fine with the following modification for null checks as well

function checkNested(obj /*, level1, level2, ... levelN*/) 
      {
             var args = Array.prototype.slice.call(arguments),
             obj = args.shift();

            for (var i = 0; i < args.length; i++) 
            {
                if (obj == null || !obj.hasOwnProperty(args[i]) ) 
                {
                    return false;
                }
                obj = obj[args[i]];
            }
            return true;
    }
3

Following options were elaborated starting from this answer. Same tree for both :

var o = { a: { b: { c: 1 } } };

Stop searching when undefined

var u = undefined;
o.a ? o.a.b ? o.a.b.c : u : u // 1
o.x ? o.x.y ? o.x.y.z : u : u // undefined
(o = o.a) ? (o = o.b) ? o.c : u : u // 1

Ensure each level one by one

var $ = function (empty) {
    return function (node) {
        return node || empty;
    };
}({});

$($(o.a).b).c // 1
$($(o.x).y).z // undefined
3

I know this question is old, but I wanted to offer an extension by adding this to all objects. I know people tend to frown on using the Object prototype for extended object functionality, but I don't find anything easier than doing this. Plus, it's now allowed for with the Object.defineProperty method.

Object.defineProperty( Object.prototype, "has", { value: function( needle ) {
    var obj = this;
    var needles = needle.split( "." );
    for( var i = 0; i<needles.length; i++ ) {
        if( !obj.hasOwnProperty(needles[i])) {
            return false;
        }
        obj = obj[needles[i]];
    }
    return true;
}});

Now, in order to test for any property in any object you can simply do:

if( obj.has("some.deep.nested.object.somewhere") )

Here's a jsfiddle to test it out, and in particular it includes some jQuery that breaks if you modify the Object.prototype directly because of the property becoming enumerable. This should work fine with 3rd party libraries.

0
3

I think this is a slight improvement (becomes a 1-liner):

   alert( test.level1 && test.level1.level2 && test.level1.level2.level3 )

This works because the && operator returns the final operand it evaluated (and it short-circuits).

1
  • You literally copied what they said they normally do, and want to avoid... Jun 9, 2020 at 16:15
3

This works with all objects and arrays :)

ex:

if( obj._has( "something.['deep']['under'][1][0].item" ) ) {
    //do something
}

this is my improved version of Brian's answer

I used _has as the property name because it can conflict with existing has property (ex: maps)

Object.defineProperty( Object.prototype, "_has", { value: function( needle ) {
var obj = this;
var needles = needle.split( "." );
var needles_full=[];
var needles_square;
for( var i = 0; i<needles.length; i++ ) {
    needles_square = needles[i].split( "[" );
    if(needles_square.length>1){
        for( var j = 0; j<needles_square.length; j++ ) {
            if(needles_square[j].length){
                needles_full.push(needles_square[j]);
            }
        }
    }else{
        needles_full.push(needles[i]);
    }
}
for( var i = 0; i<needles_full.length; i++ ) {
    var res = needles_full[i].match(/^((\d+)|"(.+)"|'(.+)')\]$/);
    if (res != null) {
        for (var j = 0; j < res.length; j++) {
            if (res[j] != undefined) {
                needles_full[i] = res[j];
            }
        }
    }

    if( typeof obj[needles_full[i]]=='undefined') {
        return false;
    }
    obj = obj[needles_full[i]];
}
return true;
}});

Here's the fiddle

3

Here's my take on it - most of these solutions ignore the case of a nested array as in:

    obj = {
        "l1":"something",
        "l2":[{k:0},{k:1}],
        "l3":{
            "subL":"hello"
        }
    }

I may want to check for obj.l2[0].k

With the function below, you can do deeptest('l2[0].k',obj)

The function will return true if the object exists, false otherwise

function deeptest(keyPath, testObj) {
    var obj;

    keyPath = keyPath.split('.')
    var cKey = keyPath.shift();

    function get(pObj, pKey) {
        var bracketStart, bracketEnd, o;

        bracketStart = pKey.indexOf("[");
        if (bracketStart > -1) { //check for nested arrays
            bracketEnd = pKey.indexOf("]");
            var arrIndex = pKey.substr(bracketStart + 1, bracketEnd - bracketStart - 1);
            pKey = pKey.substr(0, bracketStart);
			var n = pObj[pKey];
            o = n? n[arrIndex] : undefined;

        } else {
            o = pObj[pKey];
        }
        return o;
    }

    obj = get(testObj, cKey);
    while (obj && keyPath.length) {
        obj = get(obj, keyPath.shift());
    }
    return typeof(obj) !== 'undefined';
}

var obj = {
    "l1":"level1",
    "arr1":[
        {"k":0},
        {"k":1},
        {"k":2}
    ],
    "sub": {
       	"a":"letter A",
        "b":"letter B"
    }
};
console.log("l1: " + deeptest("l1",obj));
console.log("arr1[0]: " + deeptest("arr1[0]",obj));
console.log("arr1[1].k: " + deeptest("arr1[1].k",obj));
console.log("arr1[1].j: " + deeptest("arr1[1].j",obj));
console.log("arr1[3]: " + deeptest("arr1[3]",obj));
console.log("arr2: " + deeptest("arr2",obj));

3

Now we can also use reduce to loop through nested keys:

// @params o<object>
// @params path<string> expects 'obj.prop1.prop2.prop3'
// returns: obj[path] value or 'false' if prop doesn't exist

const objPropIfExists = o => path => {
  const levels = path.split('.');
  const res = (levels.length > 0) 
    ? levels.reduce((a, c) => a[c] || 0, o)
    : o[path];
  return (!!res) ? res : false
}

const obj = {
  name: 'Name',
  sys: { country: 'AU' },
  main: { temp: '34', temp_min: '13' },
  visibility: '35%'
}

const exists = objPropIfExists(obj)('main.temp')
const doesntExist = objPropIfExists(obj)('main.temp.foo.bar.baz')

console.log(exists, doesntExist)

3

You can do this by using the recursive function. This will work even if you don't know all nested Object keys name.

function FetchKeys(obj) {
    let objKeys = [];
    let keyValues = Object.entries(obj);
    for (let i in keyValues) {
        objKeys.push(keyValues[i][0]);
        if (typeof keyValues[i][1] == "object") {
            var keys = FetchKeys(keyValues[i][1])
            objKeys = objKeys.concat(keys);
        }
    }
    return objKeys;
}

let test = { level1: { level2: { level3: "level3" } } };
let keyToCheck = "level2";
let keys = FetchKeys(test); //Will return an array of Keys

if (keys.indexOf(keyToCheck) != -1) {
    //Key Exists logic;
}
else {
    //Key Not Found logic;
}
3

And yet another one which is very compact:

function ifSet(object, path) {
  return path.split('.').reduce((obj, part) => obj && obj[part], object)
}

called:

let a = {b:{c:{d:{e:'found!'}}}}
ifSet(a, 'b.c.d.e') == 'found!'
ifSet(a, 'a.a.a.a.a.a') == undefined

It won't perform great since it's splitting a string (but increases readability of the call) and iterates over everything even if it's already obvious that nothing will be found (but increases readability of the function itself).

at least is faster than _.get http://jsben.ch/aAtmc

Not the answer you're looking for? Browse other questions tagged or ask your own question.