how to check a deeply nested object is undefined?

Question

I would like to check whether an object is undefined

this.state.data.value[0].name

I attempted the following and these will say Type error this.state.data.value is undefined in the console.

if(typeof this.data.value[0].name=== "undefined"){
//do something
}

if(this.data.value[0].name == undefined){
//do something
}

if(!!this.data.value[0].name){
//do something
}

if(!this.data.value[0].name){
//do something
}

if(this.data){
  if(this.data.value){ // It says type error, this.state.value is undefined in the console.
    }
}

How shall I check the object this.state.value[0].name is undefined?

I attempted this

 if (typeof (this.data) !== undefined) {
      debugger;
      if (typeof (this.data.value) !== undefined) {
        debugger;

        if (typeof (this.data.value[0].name != undefined)) {//cannot read value [0]
          debugger;


        }
      }
    }

My Solution, thanks to pranav-c-balan

  if (this.data && this.data.value && this.data.value[0] && this.data.value[0].name) {
      return true;
    } else {
      document.getElementById("myDIV").innerHTML =
        "<b>Custom Error Text</b>";
      return false;

    }

A working Example

   let data={};
    data.value=[{name:123}];

    function checkValue(){
      if(data && data.value && data.value[0] && data.value[0].name){
        return true;
      }else{
         return false;
      }
     }
     let correct=checkValue();
     
       if(correct){
          console.log("This is valid, data.value[0].name Exist");
          }else{
          console.log("This is invalid,data.value[0].name do not Exist");

          }

  function checkValue2(){
      if(data && data.value && data.value[0] && data.value[0].names){
        return true;
      }else{
         return false;
      }
     }

let correct2=checkValue2();
 if(correct2){
          console.log("This is valid, data.value[0].names Exist");
          }else{
          console.log("This is invalid,data.value[0].names do not Exist");

          }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.0/react-dom.min.js"></script>

@VLAZ, no because the example you shown it one layer of object, but I would like to check a nested object this .state.value[0].name it could be chances this.state.value exist but do not have .name property then I want this if statement to catch it and do something. neverthless, when I write this.state.value the console already throws an error saying this.state.value is undefined — Random I.T, Mar 26 '20 at 08:04
@PranavCBalan I tried if (!this.data && !this.data.value && !this.data.value[0] && !this.data.value[0].name) { // the if statement was not evaluated — Random I.T, Mar 26 '20 at 08:38
@RandomI.T `!this.data` means that it will only go in if it's *falsy*, so if `this.data` exists, it will be skipped. Remove the NOT. — VLAZ, Mar 26 '20 at 09:25
@PranavCBalan, I like your idea, Its Simple and it works!!!! — Random I.T, Mar 26 '20 at 12:23

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

You can check your object by using optional chaining (?.).

This will check every part of your chain. Say if it is undefined the data inside the state then it returns undefined excepts throwing an error.

let state = {
  data: {
    value: [
      {name: 'value'}
    ]
  }
}

console.log(typeof state?.data?.value?.[0]?.name);
console.log(typeof state?.data?.value?.[1]?.name);
console.log(typeof state?.datum?.value?.[0]?.name); // In this case it returns 'undefined' for dutum stage.

Note

Optional chaining has poor browser support until now. So you have to use Babel or any other Javascript compiler for browser support.

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 26 '20 at 08:08

Sajeeb Ahamed

6,070
2
21
30

2

The standard is NOT finalised. Support is not widely available, either. You need to use Babel for this. TypeScript also allows it. – VLAZ Mar 26 '20 at 08:09
Yes, you have to use Babel for support. But as you are using React I hope the babel is configured well. :) – Sajeeb Ahamed Mar 26 '20 at 08:11
1

People who don't use React are also able to see this post. In fact, OP is in the extreme minority of people who would see this post - that would be a single view, everybody else who reads the post is *not* OP and might or might not have React or Babel available. Remember, posts are not for individuals - they are for everybody. – VLAZ Mar 26 '20 at 08:14
I get your point @VLAZ. Thanks for your suggestion. I am mentioning this in my answer. – Sajeeb Ahamed Mar 26 '20 at 08:18
thanks for your reply it says syntax error I cannot compile using gulp bundle – Random I.T Mar 26 '20 at 08:25
You can use this ```gulp-babel``` plugin for your Gulp. https://github.com/babel/gulp-babel – Sajeeb Ahamed Mar 26 '20 at 08:53

Sergey Bogdanov · Answer 2 · 2020-03-26T08:22:18.690

1

Just use the same typeof operator:

if(typeof(this.state) != 'undefined'){
  if(typeof(this.state.value) != 'undefined') { 
        // next source
    }
}

edited Mar 26 '20 at 08:22

answered Mar 26 '20 at 08:07

Sergey Bogdanov

525
9
22

1

`typeof` is not a function, it's an operator. – VLAZ Mar 26 '20 at 08:10
I attempted this and it says this.data.value is undefined – Random I.T Mar 26 '20 at 08:23

how to check a deeply nested object is undefined?

2 Answers2

Note