CODEWITHSUNDEEP
javascriptjquery
rayees
rayees

Reputation: 137

Find and remove empty properties from objects

This is my array of objects:

var data = [
  {
    "label": "HOME",
    "href": "web-tutor99.com",
    "children": [{}]
  }, 
  {
    "href": "web-tutor99.com",
    "label": "HTML5"
  }
];

It is a multidimensional object and here the children property is empty. How can I find empty properties like this and remove them using jQuery?

Upvotes: 4

Views: 5051

Answers (4)

Redu
Redu

Reputation: 26161

I think the following pure JS snippet takes care of the job. You can check it @ JSBin

var data = [{"label":"HOME","href":"web-tutor99.com","children":[{}]},{"href":"web-tutor99.com","label":"HTML5"}];

function walkJSONObj(obj){
  for (var prop in obj) {
    if (obj[prop].constructor === Array) {        //if prop is an array 
      walkJSONArray(obj[prop]);                   //go walk through the arrays
      obj[prop].length === 0 && delete obj[prop]; //if on return the array is empty delete it
    }
    else typeof obj[prop] === 'undefined' && delete obj[prop]; //delete undefined props
  }    
}

function walkJSONArray(arr){
  for (var l = arr.length-1; l >= 0; l--) {
    walkJSONObj(arr[l]); // go walk the item objects
    if (Object.keys(arr[l]).length === 0 && JSON.stringify(arr[l]) === JSON.stringify({})) {
      arr.splice(l, 1);  // if on return the object is empty delete it
    }
  }
}

walkJSONArray(data);

Upvotes: 0

Niklesh Raut
Niklesh Raut

Reputation: 34914

Try this 

data = [{
      "label": "HOME",
      "href": "web-tutor99.com",
      "children": [{}]
    }, {
      "href": "web-tutor99.com",
      "label": "HTML5"
    }];

    alert("Before : "+JSON.stringify(data));
     //console.log(data);

    checkEmptyObj(data);

     alert("After : "+JSON.stringify(data));

    function checkEmptyObj(data) {
      $.each(data, function(key, value) {
        if ($.isPlainObject(value) || $.isArray(value)) {
          checkEmptyObj(value);
        }
        //alert(key+":"+$.isEmptyObject(value));
        if (value === "" || value === null || $.isEmptyObject(value)) {
          delete data[key];
        }
      });

    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Aides
Aides

Reputation: 3673

You could simply create a (if nested, recursive) function looping through all elements and check if the it has a value, if not, delete that property.

In your example object you have the problem that the children property is by far not empty - it is a property with a value of an array containing one empty object. Depending on your scenario you'd have to run through your object multiple times, removing empty entries step by step (could probably do some optimization).

As a final note, you can use for...in to loop through an object's properties and for...of to loop through an object's/array's values.

Upvotes: 0

Kylie
Kylie

Reputation: 11749

You could do this..

for (var i in data) {
  if (test[i].children === null || test[i].children === undefined || test[i].children.length<=0) {
    delete test[i].children;
  }
}

But I see no practical use in wasting CPU cycles looping through objects to remove empty objects.

Not really sure what you're trying to achieve. But you're better off just checking if its empty, and then not displaying if its the case.

Upvotes: 0

Related Questions