How to remove undefined and null values from an object using lodash?

JavascriptObjectLodash

Javascript Problem Overview


I have a Javascript object like:

var my_object = { a:undefined, b:2, c:4, d:undefined };

How to remove all the undefined properties? False attributes should stay.

Javascript Solutions


Solution 1 - Javascript

You can simply chain _.omit() with _.isUndefined and _.isNull compositions, and get the result with lazy evaluation.

Demo

var result = _(my_object).omit(_.isUndefined).omit(_.isNull).value();

Update March 14, 2016:

As mentioned by dylants in the comment section, you should use the _.omitBy() function since it uses a predicate instead of a property. You should use this for lodash version 4.0.0 and above.

DEMO

var result = _(my_object).omitBy(_.isUndefined).omitBy(_.isNull).value();

Update June 1, 2016:

As commented by Max Truxa, lodash already provided an alternative _.isNil, which checks for both null and undefined:

var result = _.omitBy(my_object, _.isNil);

Solution 2 - Javascript

If you want to remove all falsey values then the most compact way is:

For Lodash 4.x and later:

_.pickBy({ a: null, b: 1, c: undefined }, _.identity);
>> Object {b: 1}

For legacy Lodash 3.x:

_.pick(obj, _.identity);

_.pick({ a: null, b: 1, c: undefined }, _.identity);
>> Object {b: 1}

Solution 3 - Javascript

The correct answer is:

_.omitBy({ a: null, b: 1, c: undefined, d: false }, _.isNil)

That results in:

{b: 1, d: false}

The alternative given here by other people:

_.pickBy({ a: null, b: 1, c: undefined, d: false }, _.identity);

Will remove also false values which is not desired here.

Solution 4 - Javascript

if you are using lodash, you can use _.compact(array) to remove all falsely values from an array.

_.compact([0, 1, false, 2, '', 3]);
// => [1, 2, 3]

https://lodash.com/docs/4.17.4#compact

Solution 5 - Javascript

Just:

_.omit(my_object, _.isUndefined)

The above doesn't take in account null values, as they are missing from the original example and mentioned only in the subject, but I leave it as it is elegant and might have its uses.

Here is the complete example, less concise, but more complete.

var obj = { a: undefined, b: 2, c: 4, d: undefined, e: null, f: false, g: '', h: 0 };
console.log(_.omit(obj, function(v) { return _.isUndefined(v) || _.isNull(v); }));

Solution 6 - Javascript

To complete the other answers, in lodash 4 to ignore only undefined and null (And not properties like false) you can use a predicate in _.pickBy:

_.pickBy(obj, v !== null && v !== undefined)

Example below :

const obj = { a: undefined, b: 123, c: true, d: false, e: null};

const filteredObject = _.pickBy(obj, v => v !== null && v !== undefined);

console.log = (obj) => document.write(JSON.stringify(filteredObject, null, 2));
console.log(filteredObject);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>

Solution 7 - Javascript

According to lodash docs:

_.compact(_.map(array, fn))

Also you can filter out all nulls

Solution 8 - Javascript

For deep nested object you can use my snippet for lodash > 4

const removeObjectsWithNull = (obj) => {
    return _(obj)
      .pickBy(_.isObject) // get only objects
      .mapValues(removeObjectsWithNull) // call only for values as objects
      .assign(_.omitBy(obj, _.isObject)) // save back result that is not object
      .omitBy(_.isNil) // remove null and undefined from object
      .value(); // get value
};

Solution 9 - Javascript

with pure JavaScript: (although Object.entries is ES7, Object.assign is ES6; but equivalent ES5 uses Object.keys only should be also doable); also notice v != null checks for both null and undefined;

> var d = { a:undefined, b:2, c:0, d:undefined, e: null, f: 0.3, s: "", t: false };
undefined
> Object.entries(d)
    .filter(([ k, v ]) => (v != null))
    .reduce((acc, [k, v]) => Object.assign(acc, {[k]: v}), {})
{ b: 2, c: 0, f: 0.3, s: '', t: false }

Edit: this below is the version with ES5 Object.keys only: but generally with ES7 in Node v8 is pretty much enjoyable ;-)

> Object.keys(d)
    .filter(function(k) { return d[k] != null; })
    .reduce(function(acc, k) { acc[k] = d[k]; return acc; }, {});
{ b: 2, c: 0, f: 0.3, s: '', t: false }

Update in October 2017: with Node v8 (since v8.3 or so) now it has object spreading construct:

> var d = { a:undefined, b:2, c:0, d:undefined,
    e: null, f: -0.0, s: "", t: false, inf: +Infinity, nan: NaN };
undefined
> Object.entries(d)
    .filter(([ k, v ]) => (v != null))
    .reduce((acc, [k, v]) => ({...acc, [k]: v}), {})
{ b: 2, c: 0, f: -0, s: '', t: false, inf: Infinity, nan: NaN }

or within one reduce only:

> Object.entries(d)
   .reduce((acc, [k, v]) => (v==null ? acc : {...acc, [k]: v}), {})
{ b: 2, c: 0, f: -0, s: '', t: false, inf: Infinity, nan: NaN }

Update: someone want recursive? isn't that hard either, just need an additional check of isObject, and recursively call itself:

> function isObject(o) {
    return Object.prototype.toString.call(o) === "[object Object]"; }
undefined
> function dropNullUndefined(d) {
    return Object.entries(d)
      .reduce((acc, [k, v]) => (
        v == null ? acc :
         {...acc, [k]: (isObject(v) ? dropNullUndefined(v) : v) }
      ), {});
  }
> dropNullUndefined({a: 3, b:null})
{ a: 3 }
> dropNullUndefined({a: 3, b:null, c: { d: 0, e: undefined }})
{ a: 3, c: { d: 0 } }

my conclusion: if pure Javascript can do, I would avoid any third party library dependencies:

Solution 10 - Javascript

To remove undefined, null, and empty string from object

_.omitBy(object, (v) => _.isUndefined(v) || _.isNull(v) || v === '');

Solution 11 - Javascript

I encountered a similar problem with removing undefined from an object (deeply), and found that if you are OK to convert your plain old object and use JSON, a quick and dirty helper function would look like this:

function stripUndefined(obj) {
  return JSON.parse(JSON.stringify(obj));
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Description

"...If undefined, a function, or a symbol is encountered during conversion it is either omitted (when it is found in an object) or censored to null (when it is found in an array)."

Solution 12 - Javascript

Since some of you might have arrived at the question looking to specifically removing only undefined, you can use:

  • a combination of Lodash methods

      _.omitBy(object, _.isUndefined)
    
  • the rundef package, which removes only undefined properties

      rundef(object)
    

If you need to recursively remove undefined properties, the rundef package also has a recursive option.

rundef(object, false, true);

See the documentation for more details.

Solution 13 - Javascript

Here's the lodash approach I'd take:

_(my_object)
    .pairs()
    .reject(function(item) {
        return _.isUndefined(item[1]) ||
            _.isNull(item[1]);
    })
    .zipObject()
    .value()

The pairs() function turns the input object into an array of key/value arrays. You do this so that it's easier to use reject() to eliminate undefined and null values. After, you're left with pairs that weren't rejected, and these are input for zipObject(), which reconstructs your object for you.

Solution 14 - Javascript

Taking in account that undefined == null we can write as follows:

let collection = {
  a: undefined,
  b: 2,
  c: 4,
  d: null,
}

console.log(_.omit(collection, it => it == null))
// -> { b: 2, c: 4 }

JSBin example

Solution 15 - Javascript

You can also use Object.entries with Array.prototype.filter.

const omitNullish = (object) => 
   Object.fromEntries(
       Object.entries(object).filter(([, value]) => value != null)
   )

omitNullish({ a: null, b: 1, c: undefined, d: false, e: 0 }) // { b: 1, d: false, e: 0}

If you want to use lodash, they are removing omit from v5 so an alternative is to use fp/pickBy along with isNil and negate.

import pickBy from 'lodash/fp/pickBy'
import isNil from 'lodash/isNil';
import negate from 'lodash/negate';


const omitNullish = pickBy(negate(isNil))

omitNullish({ a: null, b: 1, c: undefined, d: false, e: 0 }) // { b: 1, d: false, e: 0}

Solution 16 - Javascript

pickBy uses identity by default:

_.pickBy({ a: null, b: 1, c: undefined, d: false });

Solution 17 - Javascript

I like using _.pickBy, because you have full control over what you are removing:

var person = {"name":"bill","age":21,"sex":undefined,"height":null};

var cleanPerson = _.pickBy(person, function(value, key) {
  return !(value === undefined || value === null);
});

Source: https://www.codegrepper.com/?search_term=lodash+remove+undefined+values+from+object

Solution 18 - Javascript

Shortest way (lodash v4):

_.pickBy(my_object)

Solution 19 - Javascript

With lodash (or underscore) You may do

var my_object = { a:undefined, b:2, c:4, d:undefined, e:null };

var passedKeys = _.reject(Object.keys(my_object), function(key){ return _.isUndefined(my_object[key]) || _.isNull(my_object[key]) })

newObject = {};
_.each(passedKeys, function(key){
    newObject[key] = my_object[key];
});

Otherwise, with vanilla JavaScript, you can do

var my_object = { a:undefined, b:2, c:4, d:undefined };
var new_object = {};

Object.keys(my_object).forEach(function(key){
    if (typeof my_object[key] != 'undefined' && my_object[key]!=null){
        new_object[key] = my_object[key];
    }
});

Not to use a falsey test, because not only "undefined" or "null" will be rejected, also is other falsey value like "false", "0", empty string, {}. Thus, just to make it simple and understandable, I opted to use explicit comparison as coded above.

Solution 20 - Javascript

To omit all falsey values but keep the boolean primitives this solution helps.

_.omitBy(fields, v => (_.isBoolean(v)||_.isFinite(v)) ? false : _.isEmpty(v));

let fields = {
str: 'CAD',
numberStr: '123',
number  : 123,
boolStrT: 'true',
boolStrF: 'false',
boolFalse : false,
boolTrue  : true,
undef: undefined,
nul: null,
emptyStr: '',
array: [1,2,3],
emptyArr: []
};

let nobj = _.omitBy(fields, v => (_.isBoolean(v)||_.isFinite(v)) ? false : _.isEmpty(v));

console.log(nobj);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

Solution 21 - Javascript

var my_object = { a:undefined, b:2, c:4, d:undefined };

var newObject = _.reject(my_collection, function(val){ return _.isUndefined(val) })

//--> newCollection = { b: 2, c: 4 }

Solution 22 - Javascript

I would use underscore and take care of empty strings too:

var my_object = { a:undefined, b:2, c:4, d:undefined, k: null, p: false, s: '', z: 0 };

var result =_.omit(my_object, function(value) {
  return _.isUndefined(value) || _.isNull(value) || value === '';
});

console.log(result); //Object {b: 2, c: 4, p: false, z: 0}

jsbin.

Solution 23 - Javascript

For deep nested object and arrays. and exclude empty values from string and NaN

function isBlank(value) {
  return _.isEmpty(value) && !_.isNumber(value) || _.isNaN(value);
}
var removeObjectsWithNull = (obj) => {
  return _(obj).pickBy(_.isObject)
    .mapValues(removeObjectsWithNull)
    .assign(_.omitBy(obj, _.isObject))
    .assign(_.omitBy(obj, _.isArray))
    .omitBy(_.isNil).omitBy(isBlank)
    .value();
}
var obj = {
  teste: undefined,
  nullV: null,
  x: 10,
  name: 'Maria Sophia Moura',
  a: null,
  b: '',
  c: {
    a: [{
      n: 'Gleidson',
      i: 248
    }, {
      t: 'Marta'
    }],
    g: 'Teste',
    eager: {
      p: 'Palavra'
    }
  }
}
removeObjectsWithNull(obj)

result:

{
   "c": {
      "a": [
         {
            "n": "Gleidson",
            "i": 248
         },
         {
            "t": "Marta"
         }
      ],
      "g": "Teste",
      "eager": {
         "p": "Palavra"
      }
   },
   "x": 10,
   "name": "Maria Sophia Moura"
}

Solution 24 - Javascript

For those of you getting here looking to remove from an array of objects and using lodash you can do something like this:


 const objects = [{ a: 'string', b: false, c: 'string', d: undefined }]
 const result = objects.map(({ a, b, c, d }) => _.pickBy({ a,b,c,d }, _.identity))

 // [{ a: 'string', c: 'string' }]

Note: You don't have to destruct if you don't want to.

Solution 25 - Javascript

If you don't want to remove false values. Here is an example:

obj = {
  "a": null,
  "c": undefined,
  "d": "a",
  "e": false,
  "f": true
}
_.pickBy(obj, x => x === false || x)
> {
    "d": "a",
    "e": false,
    "f": true
  }

Solution 26 - Javascript

I was able to do this in deep objects that include arrays with just one lodash function, transform.

Note that the double-unequal (!= null) is intentional as it will also match undefined, as is the typeof 'object' check as it will match both object and array.

This is for use with plain data objects only that don't contain classes.

const cloneDeepSanitized = (obj) =>
  Array.isArray(obj)
    ? obj.filter((entry) => entry != null).map(cloneDeepSanitized)
    : transform(
        obj,
        (result, val, key) => {
          if (val != null) {
            result[key] =
              typeof val === 'object' ? cloneDeepSanitized(val) : val;
          }
        },
        {},
      );

Solution 27 - Javascript

You can use lodash to remove null and undefined objects , but you should konw what lodash method you need to use, many dev uses isNil to remove the Null and undefined objects , but this function not remove the empty objects (' ')

you can use isEmpty to remove Null , Undefined and

import pickBy from 'lodash/fp/pickBy'
import negate from 'lodash/negate';
import isEmpty from 'lodash/isEmpty';

const omitNullish = pickBy(negate(isEmpty));

      addressObject = {
      "a": null,
      "c": undefined,
      "d": "",
      "e": "test1",
      "f": "test2
    }

 const notNullObjects = omitNullish(addressObject);
 
 console.log(notNullObjects); 

> you will have this object : { > "e": "test1", > "f": "test2 > }

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJLavoieView Question on Stackoverflow
Solution 1 - JavascriptryeballarView Answer on Stackoverflow
Solution 2 - JavascriptTx3View Answer on Stackoverflow
Solution 3 - JavascriptTiago BértoloView Answer on Stackoverflow
Solution 4 - JavascriptJavaFishView Answer on Stackoverflow
Solution 5 - JavascriptPhiLhoView Answer on Stackoverflow
Solution 6 - JavascriptnSimonFRView Answer on Stackoverflow
Solution 7 - JavascriptOleg KovalView Answer on Stackoverflow
Solution 8 - Javascript1nstinctView Answer on Stackoverflow
Solution 9 - Javascriptuser5672998View Answer on Stackoverflow
Solution 10 - JavascriptAmr OmarView Answer on Stackoverflow
Solution 11 - JavascriptjeromeView Answer on Stackoverflow
Solution 12 - Javascriptd4nyllView Answer on Stackoverflow
Solution 13 - JavascriptAdam BoduchView Answer on Stackoverflow
Solution 14 - JavascriptAndrejsView Answer on Stackoverflow
Solution 15 - JavascriptmanishView Answer on Stackoverflow
Solution 16 - Javascriptchrisandrews7View Answer on Stackoverflow
Solution 17 - JavascriptTaylor HawkesView Answer on Stackoverflow
Solution 18 - JavascriptVasyl BoroviakView Answer on Stackoverflow
Solution 19 - JavascriptTaoPRView Answer on Stackoverflow
Solution 20 - JavascriptMarcio LSAView Answer on Stackoverflow
Solution 21 - JavascriptJLavoieView Answer on Stackoverflow
Solution 22 - JavascriptmrgoosView Answer on Stackoverflow
Solution 23 - JavascriptGleidosnView Answer on Stackoverflow
Solution 24 - JavascriptUser_coderView Answer on Stackoverflow
Solution 25 - JavascriptMoewizView Answer on Stackoverflow
Solution 26 - JavascriptMosesoakView Answer on Stackoverflow
Solution 27 - JavascriptAouidane Med AmineView Answer on Stackoverflow