I have to remove unwanted object properties that do not match my model. How can I achieve it with Lodash?
My model is:
var model = {
fname: null,
lname: null
}
My controller output before sending to the server will be:
var credentials = {
fname: "xyz",
lname: "abc",
age: 23
}
I am aware I can use
delete credentials.age
but what if I have lots of unwanted properties? Can I achieve it with Lodash?
You can approach it from either an "allow list" or a "block list" way:
// Block list
// Remove the values you don't want
var result = _.omit(credentials, ['age']);
// Allow list
// Only allow certain values
var result = _.pick(credentials, ['fname', 'lname']);
If it's reusable business logic, you can partial it out as well:
// Partial out a "block list" version
var clean = _.partial(_.omit, _, ['age']);
// and later
var result = clean(credentials);
Note that Lodash 5 will drop support for omit
A similar approach can be achieved without Lodash:
const transform = (obj, predicate) => {
return Object.keys(obj).reduce((memo, key) => {
if(predicate(obj[key], key)) {
memo[key] = obj[key]
}
return memo
}, {})
}
const omit = (obj, items) => transform(obj, (value, key) => !items.includes(key))
const pick = (obj, items) => transform(obj, (value, key) => items.includes(key))
// Partials
// Lazy clean
const cleanL = (obj) => omit(obj, ['age'])
// Guarded clean
const cleanG = (obj) => pick(obj, ['fname', 'lname'])
// "App"
const credentials = {
fname:"xyz",
lname:"abc",
age:23
}
const omitted = omit(credentials, ['age'])
const picked = pick(credentials, ['age'])
const cleanedL = cleanL(credentials)
const cleanedG = cleanG(credentials)
Get a list of properties from model using _.keys(), and use _.pick() to extract the properties from credentials to a new object:
var model = {
fname:null,
lname:null
};
var credentials = {
fname:"xyz",
lname:"abc",
age:23
};
var result = _.pick(credentials, _.keys(model));
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js"></script>
If you don't want to use Lodash, you can use Object.keys(), and Array.prototype.reduce():
var model = {
fname:null,
lname:null
};
var credentials = {
fname:"xyz",
lname:"abc",
age:23
};
var result = Object.keys(model).reduce(function(obj, key) {
obj[key] = credentials[key];
return obj;
}, {});
console.log(result);
You can easily do this using _.pick:
var model = {
fname: null,
lname: null
};
var credentials = {
fname: 'abc',
lname: 'xyz',
age: 2
};
var result = _.pick(credentials, _.keys(model));
console.log('result =', result);
<script src="https://cdn.jsdelivr.net/lodash/4.16.4/lodash.min.js"></script>
But you can simply use pure JavaScript (specially if you use ECMAScript 6), like this:
const model = {
fname: null,
lname: null
};
const credentials = {
fname: 'abc',
lname: 'xyz',
age: 2
};
const newModel = {};
Object.keys(model).forEach(key => newModel[key] = credentials[key]);
console.log('newModel =', newModel);
Lodash unset is suitable for removing a few unwanted keys.
const myObj = {
keyOne: "hello",
keyTwo: "world"
}
unset(myObj, "keyTwo");
console.log(myObj); /// myObj = { keyOne: "hello" }
Here I have used omit() for the respective 'key' which you want to remove... by using the Lodash library:
var credentials = [{
fname: "xyz",
lname: "abc",
age: 23
}]
let result = _.map(credentials, object => {
return _.omit(object, ['fname', 'lname'])
})
console.log('result', result)
You can use _.omit() for emitting the key from a JSON array if you have fewer objects:
_.forEach(data, (d) => {
_.omit(d, ['keyToEmit1', 'keyToEmit2'])
});
If you have more objects, you can use the reverse of it which is _.pick():
_.forEach(data, (d) => {
_.pick(d, ['keyToPick1', 'keyToPick2'])
});
To select (or remove) object properties that satisfy a given condition deeply, you can use something like this:
function pickByDeep(object, condition, arraysToo=false) {
return _.transform(object, (acc, val, key) => {
if (_.isPlainObject(val) || arraysToo && _.isArray(val)) {
acc[key] = pickByDeep(val, condition, arraysToo);
} else if (condition(val, key, object)) {
acc[key] = val;
}
});
}
https://codepen.io/aercolino/pen/MWgjyjm
This is my solution to deep remove empty properties with Lodash:
const compactDeep = obj => {
const emptyFields = [];
function calculateEmpty(prefix, source) {
_.each(source, (val, key) => {
if (_.isObject(val) && !_.isEmpty(val)) {
calculateEmpty(`${prefix}${key}.`, val);
} else if ((!_.isBoolean(val) && !_.isNumber(val) && !val) || (_.isObject(val) && _.isEmpty(val))) {
emptyFields.push(`${prefix}${key}`);
}
});
}
calculateEmpty('', obj);
return _.omit(obj, emptyFields);
};
For array of objects
model = _.filter(model, a => {
if (!a.age) { return a }
})
Recursively removing paths.
I just needed something similar, not removing just keys, but keys by with paths recursively.
Thought I'd share.
Simple readable example, no dependencies
/**
* Removes path from an object recursively.
* A full path to the key is not required.
* The original object is not modified.
*
* Example:
* const original = { a: { b: { c: 'value' } }, c: 'value' }
*
* omitPathRecursively(original, 'a') // outputs: { c: 'value' }
* omitPathRecursively(original, 'c') // outputs: { a: { b: {} } }
* omitPathRecursively(original, 'b.c') // { a: { b: {} }, c: 'value' }
*/
export const omitPathRecursively = (original, path, depth = 1) => {
const segments = path.split('.')
const final = depth === segments.length
return JSON.parse(
JSON.stringify(original, (key, value) => {
const match = key === segments[depth - 1]
if (!match) return value
if (!final) return omitPathRecursively(value, path, depth + 1)
return undefined
})
)
}
Working example: https://jsfiddle.net/webbertakken/60thvguc/1/
While looking for a solution that would work for both arrays and objects, I didn't find one and so I created it.
/**
* Recursively ignore keys from array or object
*/
const ignoreKeysRecursively = (obj, keys = []) => {
const keyIsToIgnore = (key) => {
return keys.map((a) => a.toLowerCase()).includes(key)
}
const serializeObject = (item) => {
return Object.fromEntries(
Object.entries(item)
.filter(([key, value]) => key && value)
.reduce((prev, curr, currIndex) => {
if (!keyIsToIgnore(curr[0]))
prev[currIndex] =
[
curr[0],
// serialize array
Array.isArray(curr[1])
? // eslint-disable-next-line
serializeArray(curr[1])
: // serialize object
!Array.isArray(curr[1]) && typeof curr[1] === 'object'
? serializeObject(curr[1])
: curr[1],
] || []
return prev
}, []),
)
}
const serializeArray = (item) => {
const serialized = []
for (const entry of item) {
if (typeof entry === 'string') serialized.push(entry)
if (typeof entry === 'object' && !Array.isArray(entry)) serialized.push(serializeObject(entry))
if (Array.isArray(entry)) serialized.push(serializeArray(entry))
}
return serialized
}
if (Array.isArray(obj)) return serializeArray(obj)
return serializeObject(obj)
}
// usage
const refObject = [{name: "Jessica", password: "ygd6g46"}]
// ignore password
const obj = ignoreKeysRecursively(refObject, ["password"])
// expects returned array to only have name attribute
console.log(obj)
let asdf = [{"asd": 12, "asdf": 123}, {"asd": 121, "asdf": 1231}, {"asd": 142, "asdf": 1243}]
asdf = _.map(asdf, function (row) {
return _.omit(row, ['asd'])
})
Related
I need to create an Dynamic key value pairs from the existing object
const balanceScheule = 1255;
const reqCost = [{Labour Cost: "1555"}, {Material Cost: "1575"}]; // key is dynamic and keeps on changing
const amfqtyCost = 1416;
Here the logic is to create an new array of object and subtract the amfqtyCost from reqCost
Logic i Have written
reqCost.forEach(element => {
const adjustedAmount = Object.entries(element).map((m) => {
let adjustedAmount = parseInt(m[1]) - amfqtyCost;
return adjustedAmount;
});
// console.log(...adjustedAmount)
});
this return 139 and 159 which is (1555 - 1416 = 139) and (1575 1416 = 159) respectively
Expected output :
[{Labour Cost: "139"}, {Material Cost: "159"}]
How to do i merge ?
You just need to return the updated object from within map function. Also for the outer iteration use map instead of forEach to return the final result
const balanceScheule = 1255;
const reqCost = [{
'Labour Cost': "1555",
}, {
'Material Cost': "1575",
}]; // key is dynamic and keeps on changing
const amfqtyCost = 1416;
const updatedData = reqCost.map(element => {
return Object.assign({}, ...Object.entries(element).map(([key, value]) => {
let adjustedAmount = parseInt(value) - amfqtyCost;
return {
[key]: String(adjustedAmount)
};
}));
});
console.log(updatedData);
You can do something like this:
const reqCost = [{
'Labour Cost': "1555"
}, {
'Material Cost': "1575"
}];
const amfqtyCost = 1416;
const adjustedCost = reqCost.map(cost => ({
[Object.keys(cost)[0]]: (parseInt(Object.values(cost)[0]) - amfqtyCost).toFixed(0)
}));
console.log(adjustedCost);
// OR, if you prefer to be a bit more verbose:
const adjustedCost2 = reqCost.map(cost => {
const [key, value] = Object.entries(cost)[0];
return {
[key]: (parseInt(value) - amfqtyCost).toFixed(0)
}
});
console.log(adjustedCost2);
You can reverse the Object.entries
{ key : value } => [ [ key, value ] ]
transformation by using Object.fromEntries
[ [ key, value ] ] => { key : value }
the code will look like this
reqCost.map((obj) =>
Object.fromEntries(
Object.entries(obj).map(([key, value]) => [
key,
parseInt(value) - amfqtyCost,
])
)
);
i have a function like this:
const getKeysAs = (key1, key2) => {
return {
[key1]: state.key1,
[key2]: state.key2
}
}
So if state.key1 is 'a' and state.key2 is 'b', calling getKyesAs('one', 'two') would return
{
one: 'a',
two: 'b'
}
Now, if one of the argument is undefined, is there a way to not include it in the returned object ?
You can Conditionally add properties to an Object with object destructuring
const obj = {
...(key1 && { [key1]: state[key1] }),
...(key2 && { [key2]: state[key2] })
};
If some of the args function is undefined, null or 0 (falsy values) then it will no be added to the object.
There is a very scalable way to do it:
const state= {
a: "hello",
}
function getKeysAs (keys) {
return [...arguments].reduce((acc, cur)=> {
const newValue = state[cur] && {[cur]: state[cur]}
return {...acc, ...newValue}
}, {})
}
console.log(getKeysAs("a", "b"))
This way, you can pass as much keys as you need without worrying about scalability & undefined values.
Use Object.assign().
const getKeysAs = (key1, key2) => {
return Object.assign({}, key1 && {[key1]: state[key1]}, key2 && {[key2]: state[key2]});
}
Assuming you actually mean to do state[key1], not state.key1, here is a solution that doesn't create superfluous objects:
const getKeysAs = (...keys) => {
const result = {};
for (const key of keys) {
if (key != null) {
result[key] = state[key];
}
}
return result;
}
I need to transform this object :
myObject = {
"pageName": "home",
"dataExtract": "data1|data2=value2|data3=value3|data4=value4a,value4b,value4c"}
To this one:
myObject_mod = {
'pageName' : 'home',
'dataExtract' : {
'data1' : '', //no value for 'data1'
'data2' : 'value2',
'data3' : 'value3',
'data4' : {
'data4key1' : 'value4a',
'data4key2' : 'value4b',
'data4key3' : 'value4c'
}
}
I've started by taking the 'dataExtract' key, and split it by "|", so I get its values splited:
myObject.dataExtract.split("|");
(4) ["data1", "data2=value2", "data3=value3", "data4=value4a,value4b,value4c"]
How can I continue?
Use reduce to build up your result object for every entry in your data extract. The general form would be:
myArray.reduce((resultObject, entryString) => {
// some logic here
resultObject[key] = resultValue;
return resultObject
}, {});
For example:
array = {
"pageName": "home",
"dataExtract": "data1|data2=value2|data3=value3|data4=value4a,value4b,value4c"
};
array_mod = {
pageName: array.pageName,
dataExtract: array.dataExtract.split("|").reduce((obj, entry) => {
// handle cases like data1
if (entry.indexOf('=') === -1) {
obj[entry] = '';
return obj;
}
// handle cases like data2 and data3
const [key, value] = entry.split('=', 2);
if (value.indexOf(',') === -1) {
obj[key] = value;
return obj;
}
// handle cases like data4
const values = value.split(',');
obj[key] = values.reduce((o, v, i) => (o[`${key}key${i+1}`] = v, o), {});
return obj;
}, {})
};
console.log(array_mod);
Use a combination of Array.split(), Array.reduce(), and destructuring, to break the string into keys and values, and rebuild as an object:
const object = {
"pageName": "home",
"dataExtract": "data1|data2=value2|data3=value3|data4=value4a,value4b,value4c"
}
const result = {
...object,
dataExtract: object.dataExtract.split('|')
.reduce((r, kv) => {
const [key, value = ''] = kv.split('=')
r[key] = !value.includes(',') ?
value
:
value.split(',').reduce((ra, val, i) => {
ra[`${key}key${i + 1}`] = val;
return ra;
}, {})
return r
}, {})
}
console.log(result)
An alternative to what was already posted, also using String.split and Array.reduce:
const array = {
"pageName": "home",
"dataExtract": "data1|data2=value2|data3=value3|data4=value4a,value4b,value4c"
};
const array_mod = {
pageName: array.pageName,
dataExtract: array.dataExtract.split('|').reduce((r, cur) => {
const [k, v = ''] = cur.split('=', 2);
const vs = v.split(',');
r[k] = vs.length > 1 ? vs.reduce((sr, scur, i) => (sr[`${k}key${i + 1}`] = scur, sr), {}) : v;
return r;
}, {})
};
console.log(array_mod);
With comments and more explicit variable names:
const array = {
"pageName": "home",
"dataExtract": "data1|data2=value2|data3=value3|data4=value4a,value4b,value4c"
};
const array_mod = {
pageName: array.pageName,
// Split by | and build a key => value object from it
dataExtract: array.dataExtract.split('|').reduce((data, entry) => {
// Grab key (before `=`) and value (after `=`)
const [key, value = ''] = entry.split('=', 2);
// Grab subvalues (separated by `,`) if any
const subValues = value.split(',');
// If there are at least 2 subvalues, build a key => value object from them
data[key] = subValues.length > 1
? subValues.reduce((sub, subVal, i) => (sub[`${key}key${i + 1}`] = subVal, sub), {})
// Otherwise return the value as string
: value;
return data;
}, {})
};
console.log(array_mod);
I have a json int file that contains any items like below:
Input JSON
{
"action.button.submit": "Submit"
"action.button.submitting": "Submitting"
"buttons.common.add": "Add"
"buttons.common.reset": "Reset"
"constants.bom.conditional.or.mandatory.conditional": "Conditional"
"constants.bom.conditional.or.mandatory.mandatory": "Mandatory"
}
Output
{
action: {
button: {
submit: 'Submit'
submitting: 'Submitting'
}
},
buttons: {
common: {
add: 'Add',
reset: 'Reset'
}
},
constants: {
bom: {
conditional: {
or: {
mandatory:{
conditional: 'Conditional',
mandatory: 'Mandatory'
}
}
}
}
}
}
This was as far as I could get:
newData = {};
Object.keys(data).forEach(item => {
const splitData = item.split('.');
splitData.forEach((detail, index) => {
if(index === 0 && !newData[detail]) newData[detail] = {};
})
});
console.info(newData)
I would like to take the Input and make it look like the output
You have to recursively traverse deep into the resulting object:
function parse(obj) {
const root = {};
for(const [key, value] of Object.entries(obj)) {
const parts = key.split(".");
const parent = parts.slice(0, -1).reduce((acc, part) => acc[part] || (acc[part] = {}), root);
parent[parts.pop()] = value;
}
return root;
}
You could use one forEach loop on object entries and then inside split each key on .. After that you can use reduce method on that array of keys to build nested object.
const obj = {
"action.button.submit": "Submit",
"action.button.submitting": "Submitting",
"buttons.common.add": "Add",
"buttons.common.reset": "Reset",
"constants.bom.conditional.or.mandatory.conditional": "Conditional",
"constants.bom.conditional.or.mandatory.mandatory": "Mandatory"
}
const res = {}
Object.entries(obj).forEach(([key, value]) => {
key.split('.').reduce((r, e, i, a) => {
return r[e] || (r[e] = (a[i + 1] ? {} : value))
}, res)
})
console.log(res)
Using Lodash you can do this with _.set method that takes target object, nested key and value.
const obj = {"action.button.submit": "Submit","action.button.submitting": "Submitting","buttons.common.add": "Add","buttons.common.reset": "Reset","constants.bom.conditional.or.mandatory.conditional": "Conditional","constants.bom.conditional.or.mandatory.mandatory": "Mandatory"}
const res = {}
_.forEach(_.entries(obj), ([k, v]) => _.set(res, k, v))
console.log(res)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>
is there a way to access a nested property within an object without knowing its path?
For instance I could have something like this
let test1 = {
location: {
state: {
className: 'myCalss'
}
}
};
let test2 = {
params: {
className: 'myCalss'
}
};
Is there neat way to 'extract' className property?
I have a solution but it's pretty ugly, and it accounts just for this two cases, I was wondering if there is something more flexible I could do
Here's a somewhat elegant approach to creating nested property getters:
const getProperty = property => {
const getter = o => {
if (o && typeof o === 'object') {
return Object.entries(o)
.map(([key, value]) => key === property ? value : getter(value))
.filter(Boolean)
.shift()
}
}
return getter
}
const test1 = {
location: {
state: {
className: 'test1'
}
}
}
const test2 = {
params: {
className: 'test2'
}
}
const test3 = {}
const getClassName = getProperty('className')
console.log(getClassName(test1))
console.log(getClassName(test2))
console.log(getClassName(test3))
If you want to prevent cyclical objects from causing a stack overflow, I suggest using a WeakSet to keep track of iterated object references:
const getProperty = property => {
const getter = (o, ws = new WeakSet()) => {
if (o && typeof o === 'object' && !ws.has(o)) {
ws.add(o)
return Object.entries(o)
.map(([key, value]) => key === property ? value : getter(value, ws))
.filter(Boolean)
.shift()
}
}
return getter
}
const test1 = {
location: {
state: {
className: 'test1'
}
}
}
const test2 = {
params: {
className: 'test2'
}
}
const test3 = {}
const test4 = {
a: {
b: {}
}
}
test4.a.self = test4
test4.a.b.self = test4
test4.a.b.className = 'test4'
const getClassName = getProperty('className')
console.log(getClassName(test1))
console.log(getClassName(test2))
console.log(getClassName(test3))
console.log(getClassName(test4))
Sure. Give this a try. It recursively iterate over the object and returns the first match. You can configure the for loop to match all or last, according to your needs
let test1 = {
location: {
state: {
className: 'myCalss'
}
}
};
let test2 = {
params: {
className: 'myCalss'
}
};
function getClassName(obj) {
if(typeof obj === "object" && 'className' in obj) {
return obj.className
}
const keys = Object.keys(obj)
for(let i = 0; i < keys.length; i++) {
let key = keys[i]
let res = getClassName(obj[key])
if(res) return res
}
return null
}
console.log(getClassName(test1), getClassName(test2))