How to check if value is empty in nested object

Question

For condition rendering, i'm checking if my object get an empty value.

I'm using "useState" to pass each object value to "isEmpty". First I'm creating a new object because i delete the value " SummaryOfChanges" who can be empty. After, I'm using "some" to get every value and pass every value to 'isEmpty'

//USE EFFECT

 useEffect(() => {
    if (offerData) {
      let myObject = { ...offerData };
      const { SummaryOfChanges, ...newObject } = myObject;
      
      if (Object.values(newObject)?.some((x) => isEmpty(x))) {
        setCheckIfEmpty(true);
      } else {
        setCheckIfEmpty(false);
      }
    }
  }, []);

//ISEMPTY

export const isEmpty = (value) => {
  return (
    value === undefined ||
    value === null ||
    (typeof value === 'object' && Object.keys(value).length === 0) ||
    Object.keys(value) === undefined ||
    Object.keys(value) === null ||
    (typeof value === 'string' && value.trim().length === 0)
  );
};

exemple of my object :

offerData : {
  valueOne : "hello",
  objectOne : { 
    valueOne: 'Hello', 
    valueTwo : null}
}

problem : isEmpty work perfectly and check in my object if value, nested object or array are empty. But sometimes, nested object is not empty but have value "null".

I need to add in my "isEmpty" some condition to check each value in nested object and array.

So, in this situation, setCheckIfEmpty will return 'false' because my "objectOne" is not empty, even if "objectOne.valueTwo" === null.

I'm actually trying to map through each value, but for the moment it is not working.

Live bug help - www.dialect.so · Accepted Answer · 2023-01-06 16:56:33Z

2

To recursively check objects, you should modify your isEmpty function to call itself on nested objects:

export const isEmpty = (value) => {
  if (typeof value === 'object' && value !== null) {
    for (const v of Object.values(value)) {
      if (isEmpty(v)) return true;
    }
  }

  return (
    value === undefined ||
    value === null ||
    (typeof value === 'object' && Object.keys(value).length === 0) ||
    // Also these lines aren't needed because Object.keys() always returns an array
    // Object.keys(value) === undefined ||
    // Object.keys(value) === null ||
    (typeof value === 'string' && value.trim().length === 0)
  );
};

edited Jan 6, 2023 at 16:56

answered Jan 6, 2023 at 16:46

Live bug help - www.dialect.so

1,6861 gold badge5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Elodie Muller Over a year ago

getting 'Uncaught RangeError: Maximum call stack size exceeded at isEmpty'.

Live bug help - www.dialect.so Over a year ago

Sorry, I forgot a for loop; I updated my code

Elodie Muller Over a year ago

my bad, I didn't check either , thanks :)

João Pesce · Accepted Answer · 2023-01-06 17:02:06Z

To search inside an object's values or in any children, however deep inside the children might be, you can use recursion:

// Return true if object has a null, undefined, empty string or empty object value or if any children (however deep inside the children might be) has these value:
function isEmpty(myObject) {
  for(var key in myObject) {
    if(myObject[key] == null || myObject[key] == undefined) return true;
    if((typeof myObject[key] === 'object' && Object.keys(myObject[key]).length === 0)) return true;
    if((typeof myObject[key] === 'string' && myObject[key].trim().length === 0)) return true;
    if(myObject[key] instanceof Object) return isEmpty(myObject[key]);
  }
  
  return false;
}

Testing:

let o = {
  valueOne : "hello",
  objectOne : { 
    valueOne: 'Hello', 
    valueTwo : null}
}


isEmpty(o); //true

Collectives™ on Stack Overflow

How to check if value is empty in nested object

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related