How to check if value is empty in nested object-CodePudding

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.

CodePudding user response：

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)
  );
};

CodePudding user response：

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