Recursively remove null values from JavaScript object
I have a JSON obj, after some operations (like delete some pieces), I print it and everything looks good except that I have some null values. How do I remove these?
I use JSON.stringify(obj, null, 2) method to print, and here is what it looks like:
{
"store": {
"book": [
null,
{
"category": "fiction",
"author": "Evelyn Waugh",
"title": "Sword of Honour",
"price": 12.99
},
null,
{
"category": "fiction",
"author": "J. R. R. Tolkien",
"title": "The Lord of the Rings",
"isbn": "0-395-19395-8",
"price": 22.99
}
],
"bicycle": {
"color": "red",
null,
"price": 19.95
}
}
}
I want it to be much compact and pretty clean(remove the extra 3 null values):
{
"store": {
"book": [
{
"category": "fiction",
"author": "Evelyn Waugh",
"title": "Sword of Honour",
"price": 12.99
},
{
"category": "fiction",
"author": "J. R. R. Tolkien",
"title": "The Lord of the Rings",
"isbn": "0-395-19395-8",
"price": 22.99
}
],
"bicycle": {
"color": "red",
"price": 19.95
}
}
}
I had to solve a similar problem, however I wanted to remove not only null values but also undefined , NaN , empty String , empty array and empty object values, recursively, by inspecting nested objects and also nested arrays.
The following function is using Lo-Dash:
function pruneEmpty(obj) {
return function prune(current) {
_.forOwn(current, function (value, key) {
if (_.isUndefined(value) || _.isNull(value) || _.isNaN(value) ||
(_.isString(value) && _.isEmpty(value)) ||
(_.isObject(value) && _.isEmpty(prune(value)))) {
delete current[key];
}
});
// remove any leftover undefined values from the delete
// operation on an array
if (_.isArray(current)) _.pull(current, undefined);
return current;
}(_.cloneDeep(obj)); // Do not modify the original object, create a clone instead
}
For example, if you invoke the method with the following input object:
var dirty = {
key1: 'AAA',
key2: {
key21: 'BBB'
},
key3: {
key31: true,
key32: false
},
key4: {
key41: undefined,
key42: null,
key43: [],
key44: {},
key45: {
key451: NaN,
key452: {
key4521: {}
},
key453: [ {foo: {}, bar:''}, NaN, null, undefined ]
},
key46: ''
},
key5: {
key51: 1,
key52: ' ',
key53: [1, '2', {}, []],
key54: [{ foo: { bar: true, baz: null }}, { foo: { bar: '', baz: 0 }}]
},
key6: function () {}
};
It'll recursively discard all the "bad" values, keeping in the end only the ones that carry some information.
var clean = pruneEmpty(dirty);
console.log(JSON.stringify(clean, null, 2));
{
key1: 'AAA',
key2: {
key21: 'BBB'
},
key3: {
key31: true,
key32: false
},
key5: {
key51: 1,
key52: ' ',
key53: [1, '2'],
key54: [{ foo: { bar: true }}, { foo: { baz: 0 }}]
}
};
Hope it helps!
// Iterate the array from back to front, removing null entries
for (var i=obj.store.book.length;i--;){
if (obj.store.book[i]===null) obj.store.book.splice(i,1);
}
If you want to remove all null values recursively from both objects and arrays:
// Compact arrays with null entries; delete keys from objects with null value
function removeNulls(obj){
var isArray = obj instanceof Array;
for (var k in obj){
if (obj[k]===null) isArray ? obj.splice(k,1) : delete obj[k];
else if (typeof obj[k]=="object") removeNulls(obj[k]);
}
}
Seen in action:
var o = {
"store": {
"book": [
null,
{
"category": "fiction",
"author": "Evelyn Waugh",
"title": "Sword of Honour",
"price": 12.99
},
null,
{
"category": "fiction",
"author": "J. R. R. Tolkien",
"title": "The Lord of the Rings",
"isbn": "0-395-19395-8",
"price": 22.99
}
],
"bicycle": {
"color": "red",
"bad": null,
"price": 19.95
}
}
}
removeNulls(o);
console.log(JSON.stringify(o,null,2));
// {
// "store": {
// "book": [
// {
// "category": "fiction",
// "author": "Evelyn Waugh",
// "title": "Sword of Honour",
// "price": 12.99
// },
// {
// "category": "fiction",
// "author": "J. R. R. Tolkien",
// "title": "The Lord of the Rings",
// "isbn": "0-395-19395-8",
// "price": 22.99
// }
// ],
// "bicycle": {
// "color": "red",
// "price": 19.95
// }
// }
// }
Fixing your book array is easy enough - you just have to filter out the nulls. The most straightforward way would probably be building a new array and reassigning it:
var temp = [];
var i;
for (i = 0; i < obj.store.book.length; ++i) {
if (obj.store.book[i] != null) {
temp.push(obj.store.book[i]);
}
}
obj.store.book = temp;
I'm sure there are plenty of other ways, like using jQuery, or the filter function (which I believe is not available in older browsers). You could also loop through the array and splice out the nulls. I just find this way the easiest to read.