lodash - How to _.trim an array of objects?

Question

I am trying to use lodash's _.trim to remove leading/trailing whitespace in the key/value like this:

var items = [
             {"key": "  Needs Trim 1  ", "value": "  Needs Trim 2  "},
             {"key": "  Needs Trim 3  ", "value": " Needs Trim 4  "}
            ];

It should look like this after trimming with lodash:

var items = [
             {"key": "Needs Trim 1", "value": "Needs Trim 2"},
             {"key": "Needs Trim 3", "value": "Needs Trim 4"}
            ];

I tried this:

var trimmedItems = _.map(items, _.trim);
console.log(trimmedItems); // outputs ["[object Object]", "[object Object]"]

But I don't think that worked, as the console.log(trimmedItems) doesn't show the actual objects, so I am not sure if they are trimmed. Here is a fiddle showing the issue, console should be open to see the issue as well.

Any idea how to get the fiddle to output the trimmed lodash objects to ensure they are trimmed correctly?

Answer 1

You can use each() as follow.

_.each(items, o => _.each(o, (v, k) => o[k] = v.trim()))

The first each will iterate over items array and the nested each will iterate over the properties in the object in the array. To update he original value in the items array

o[k] = v.trim()

is used. Where o is referencing to the object inside the items array.

For environments where ES6 Arrow function is not supported

_.each(items, function (o) {
    _.each(o, function (v, k) {
        o[k] = v.trim();
    });
});

 var items = [{ "key": " Needs Trim 1 ", "value": " Needs Trim 2 " }, { "key": " Needs Trim 3 ", "value": " Needs Trim 4 " }]; _.each(items, o => _.each(o, (v, k) => o[k] = v.trim())) console.log(items); 

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

Using Vanilla JavaScript:

items.forEach(function(o) {
    Object.keys(o).forEach(function(key) {
        o[key] = typeof o[key] === 'string' ? o[key].trim() : o[key];
    });
});

 var items = [{ "key": " Needs Trim 1 ", "value": " Needs Trim 2 " }, { "key": " Needs Trim 3 ", "value": " Needs Trim 4 " }]; items.forEach(function (o) { Object.keys(o).forEach(function (key) { o[key] = typeof o[key] === 'string' ? o[key].trim() : o[key]; }); }); console.log(items); 

Answer 2

You need two levels of mapping. One to map the array, and an inner one to map each of the object's properties to a trimmed version of its value:

_.map(items, function (obj) {
  return _.fromPairs(_.map(obj, function (value, key) {
    return [key, _.trim(value)]
  }))
})

Answer 3

Mapping is the correct way to go about this, but my solution is more appropriate than meagar's

 const items = [ { key1: " Needs Trim 1 " , key2: " Needs Trim 2 " }, { key1: " Needs Trim 3 " , key2: " Needs Trim 4 " } ]; const result = _.map(items, toTrimmedObject); console.log(JSON.stringify(result, null, 2)); function toTrimmedObject(obj) { return _.mapValues(obj, _.trim); } 

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

Answer 4

You need to trim the key and the value separately.

Applying _.trim() to an object first naively converts the object into a string, resulting in "[object Object]" and then trims this string.

---

Also, no need to use lodash, as JavaScript already provides all the necessary functionalities natively:

 var items = [{ "key": " Needs Trim 1 ", "value": " Needs Trim 2 " }, { "key": " Needs Trim 3 ", "value": " Needs Trim 4 " }]; var out = items.map(function(item) { item.key = item.key.trim(); item.value = item.value.trim(); return item; }); console.log(out); 

Answer 5

Trim + remove white space of all values in object (including nested objects). Skipping non-string values and undefined values.

const trimObject = (obj) => {
  each(obj, (v, k) => {
    if (v !== undefined) {
      if (isObject(v)) {
        obj[k] = trimObject(v)
      } else {
        obj[k] = typeof v === 'string' ? v.trim().replace(/\s+/g, ' ') : v
      }
    }
  })
  return obj
}