I want to remove all empty objects from another object by comparing it with another. Example of this would be:
We have default object like:
defaultObj = {
a: {},
b: {},
c: {
d: {}
}
};
And target object like this:
targetObj = {
a: { x: {} },
b: {},
c: {
d: {},
e: {}
},
f: {}
};
Now, I need to perform operation on targetObj by comparing it with defaultObj, and remove all objects that remain empty, but leave every object in targetObj that weren't originally in default.
Result of operation should look like this:
result = {
a: { x: {} },
c: {
e: {}
},
f: {}
}
Here is a solution that you can use which recursively iterates an object and removes the empty properties as defined in your use case. Make sure to create a deep copy of the object first (as shown in the example) so that the original does not get manipulated:
const defaultObj = {
a: {},
b: {},
c: {
d: {}
}
};
const targetObj = {
a: { x: {} },
b: {},
c: {
d: {},
e: {}
},
f: {}
};
// traverse the object
function removeEmptyObjectProperties(targetObject, defaultObject) {
Object.keys(targetObject).forEach((key) => {
if (defaultObject.hasOwnProperty(key)) {
// checks if it is a json object and has no keys (is empty)
if (targetObject.constructor === ({}).constructor && Object.keys(targetObject[key]).length === 0) {
delete targetObject[key];
} else {
// iterate deeper
removeEmptyObjectProperties(targetObject[key], defaultObject[key]);
}
}
})
}
// deep copy to remove the reference
const targetObjDeepCopy = JSON.parse(JSON.stringify(targetObj));
// execute
removeEmptyObjectProperties(targetObjDeepCopy, defaultObj);
// result
console.log(targetObjDeepCopy)
Related
How to deep remove all falsey values and empty objects using lodash ?
f.e. I want my object :
{ a:undefined, b:2, c:4, d:undefined , e:{ f:{} , g:null } }
to become:
{ b:2, c:4 };
var test = {
a: undefined,
b: 2,
c: 4,
d: undefined,
e: {
f: {},
g: null
}
};
function clean(obj) {
for (var propName in obj) {
if (_.isObject(obj[propName])) {
clean(obj[propName]);
}
if (obj[propName] === null || obj[propName] === undefined || _.isObject(obj[propName]) && _.isEmpty(obj[propName])) {
delete obj[propName];
}
}
}
clean(test);
console.log(test);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
You could get the properties to delete and get a clean object. This approach mutates to original object.
function clean(value) {
if (value === null || value === undefined) return true;
if (typeof value !== 'object') return false;
if (Array.isArray(value)) {
let i = value.length;
while (i--) if (clean(value[i])) value.splice(i, 1);
return !value.length;
}
Object
.keys(value)
.filter(k => clean(value[k]))
.forEach(Reflect.deleteProperty.bind(null, value));
return !Object.keys(value).length;
}
const
object = { a: undefined, b: 2, c: 4, d: undefined, e: { f: {}, g: null } , h: [], i: [1, []], j: [[[], []]] };
clean(object);
console.log(object);
The question is pretty vague and doesn't specify whether the original structure may or may not be mutated. There is also nothing in there about arrays.
This answer assumes that you don't want to mutate the original data structure and that "deep" also means to go through all array elements. If the object or array results in an empty instance the corresponding key will be removed.
function deepCompact(collection) {
const add = _.isArray(collection)
? (collection, key, value) => collection.push(value)
: (collection, key, value) => collection[key] = value;
return _.transform(collection, (collection, value, key) => {
if (_.isObject(value)) {
value = deepCompact(value);
if (_.isEmpty(value)) return;
} else {
if (!value) return;
}
add(collection, key, value);
});
}
const data1 = {a: undefined, b: 2, c: 4, d: undefined, e: {f: {} , g: null}};
console.log(deepCompact(data1));
const data2 = [{a: 0, b: 2}, false, {c: [{d: null}]}, {e: [{f: 1}]}];
console.log(deepCompact(data2));
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.20/lodash.min.js"></script>
transform is comparable to reduce, however the first callback parameter is locked to the provided or default accumulator. This means you don't have to return the accumulator from the callback. The default accumulator of transform also differs from reduce. reduce uses the first element as the initial value, whereas transform uses a new object with the same prototype as the provided collection as the default value.
I'm new to Javascript and I have nested objects and arrays that I would like to flatten.
I have...
[{ a: 2, b: [{ c: 3, d: [{e: 4, f: 5}, {e: 5,f: 6}]},
{ c: 4, d: [{e: 7, f: 8}]}
]
}]
and would like...
[{a:2,c:3,e:4,f:5}, {a:2,c:3,e:5,f:6}, {a:2,c:4,e:7,f:8}]
I've tried to adapt the following function written for an object for my array but i only get the final object within the array [{a:2,c:4,e:7,f:8}] https://stackoverflow.com/a/33158929/14313188. I think my issue is knowing how to iterate through arrays and objects?
original script:
function flatten(obj) {
var flattenedObj = {};
Object.keys(obj).forEach(function(key){
if (typeof obj[key] === 'object') {
$.extend(flattenedObj, flatten(obj[key]));
} else {
flattenedObj[key] = obj[key];
}
});
return flattenedObj;
}
my scripts (same result for both):
flat_array=[];
function superflat(array){
for (var i = 0; i < array.length; i++) {
var obj = array[i]
var flattenedObj = {};
Object.keys(obj).forEach(function(key){
if (typeof obj[key] === 'object') {
$.extend(flattenedObj, flatten(obj[key]));
} else {
flattenedObj[key] = obj[key];
}
});
flat_array.push(flattenedObj);
}
};
mega_flat_array=[];
function megaflatten(obj) {
Object.keys(obj).forEach(function(key){
var flattenedObj = {};
if (typeof obj[key] === 'object') {
$.extend(flattenedObj, flatten(obj[key]));
} else {
flattenedObj[key] = obj[key];
}
mega_flat_array.push(flattenedObj);
});
}
Thanks for your help
I would suggest starting with simpler data objects to test your function with, then progressively add more complex objects until your function performs as expected. forEach
Here you can see how I started with a simple test1 object, then test2 and so on so that the logic gets broken down into smaller increments.
To remove the duplicates we previously had, I had to throw and catch an error to break out of the recursive forEach loops, which added the unnecessary duplicate "rows" - perhaps it is better to use a normal for loop out of which you can simply break; and then use error handling for real errors.
The basic idea of the recursive function is to check the type of object (either array or object) and then loop through them to add values, but another check is needed on those to see if they are not Arrays and not Objects, if they are, call the function again. When a duplicate key is found i.e { c: 3}, remove the current key and add the new one before continuing the loop.
You can add some more tests if you have some more sample data, but there are better libraries to help you with TDD (test-driven development).
const isArray = (arr) => {
return Array.isArray(arr);
};
const isObject = (obj) => {
return typeof obj === "object" && obj !== null;
};
const flatten = (tree, row, result) => {
try {
if (isArray(tree)) {
tree.forEach((branch, index) => {
flatten(branch, row, result);
});
} else if (isObject(tree)) {
Object.keys(tree).forEach((key) => {
//we don't want to add objects or arrays to the row -
if (!isArray(tree[key]) && !isObject(tree[key])) {
if (key in row) {
// new row detected, get existing keys to work with
let keysArray = Object.keys(row);
// we are going to loop backwards and delete duplicate keys
let end = Object.keys(row).length;
let stopAt = Object.keys(row).indexOf(key);
//delete object keys from back of object to the newly found one
for (let z = end; z > stopAt; z--) {
delete row[keysArray[z - 1]];
}
row[key] = tree[key];
} else {
row[key] = tree[key];
}
} else {
flatten(tree[key], row, result);
throw "skip";
}
});
//all other rows in results will be overridden if we don't stringify
result.push(JSON.stringify(row));
}
} catch (e) {
//console.log(e)
} finally {
return result.map((row) => JSON.parse(row));
}
};
///tests
const test1 = [
{
a: 2,
b: 3,
},
];
const expected1 = [{ a: 2, b: 3 }];
const test2 = [
{
a: 2,
b: [
{
c: 3,
},
],
},
];
const expected2 = [{ a: 2, c: 3 }];
const test3 = [
{
a: 2,
b: [
{
c: 3,
},
{ c: 4 },
{ c: 5 },
],
},
];
const expected3 = [
{ a: 2, c: 3 },
{ a: 2, c: 4 },
{ a: 2, c: 5 },
];
let test4 = [
{
a: 2,
b: [
{
c: 3,
d: [
{ e: 4, f: 5 },
{ e: 5, f: 6 },
],
},
{ c: 4, d: [{ e: 7, f: 8 }] },
],
},
];
const expected4 = [
{ a: 2, c: 3, e: 4, f: 5 },
{ a: 2, c: 3, e: 5, f: 6 },
{ a: 2, c: 4, e: 7, f: 8 },
];
const test = (name, res, expected) => {
console.log(
`${name} passed ${JSON.stringify(res) === JSON.stringify(expected)}`
);
//console.log(res, expected);
};
//test("test1", flatten(test1, {}, []), expected1);
//test("test2", flatten(test2, {}, []), expected2);
//test("test3", flatten(test3, {}, []), expected3);
test("test4", flatten(test4, {}, []), expected4);
It's a bit of a behemoth, and it doesn't preserve the keys' order, but it does work with no duplicates.
It is recursive, so watch out for the call stack.
First, loop through the items in the array,
If an item is an array, make a recursive call.
On returning from that call, if the number of objects returned is more than there currently are in the final result, then update the returned objects with the properties from the objects in the final result, being careful to avoid overwriting pre-existing properties.
Otherwise update the final results with the properties in the returned result, again being careful not to overwrite existing properties.
If the item is not an array
If this is the first item put it into the final result
Otherwise add the item's properties to all the items in the final result, without overwriting any.
function makeFlat(arr) //assume you're always passing in an array
{
let objects = [];
arr.forEach(item =>
{
let currentObject = {};
const keys = Object.keys(item);
keys.forEach(key =>
{
const obj = item[key];
if(Array.isArray(obj))
{
let parts = makeFlat(obj);
if(objects.length > 0)
{
if(parts.length > objects.length)
{
parts.forEach(part =>
{
objects.forEach(ob =>
{
Object.keys(ob).forEach(k =>
{
if(Object.keys(part).indexOf(k) == -1)
{
part[k] = ob[k];
}
});
});
});
objects = parts;
}
else
{
objects.forEach(ob =>
{
parts.forEach(part =>
{
Object.keys(part).forEach(k =>
{
if(Object.keys(ob).indexOf(k) == -1)
{
ob[k] = part[k];
}
});
});
});
}
}
else
{
objects = parts;
}
}
else
{
if(Object.keys(currentObject).length == 0)
{
objects.push(currentObject);
}
currentObject[key] = item[key];
objects.forEach(ob =>
{
if(Object.keys(ob).indexOf(key) == -1)
{
ob[key] = currentObject[key]
}
});
}
});
});
return objects;
}
const inp = [{ a: 2, b: [{ c: 3, d: [{e: 4, f: 5}, {e: 5,f: 6}]},
{ c: 4, d: [{e: 7, f: 8}]}
], g:9
}];
let flattened = makeFlat(inp);
flattened.forEach(item => console.log(JSON.stringify(item)));
This question already has answers here:
How to deep merge instead of shallow merge?
(47 answers)
Closed 2 years ago.
I have a nested default object that I want to both extend and overwrite with nested properties. I tried with the spread operator but you can also use Ojbect.assign.
The problem is that nested objects get overridden instead of their respective properties getting overridden and/or extended.
const defaultOptions = {
a: 0,
b: 1,
c: {
hello: 'world',
age: 20
}
};
const specialOptions = {
b: 0,
c: {
age: 10
},
d: 1
};
const options = {
...defaultOptions,
...specialOptions
}
console.log(options)
const expectedOptions = {
a: 0,
b: 0,
c: {
hello: 'world',
age: 10
},
d: 1
}
console.log(expectedOptions)
Update 2021-08-24
It seems this question is a duplicate of another so therefore I will delete it.
Here is a recursive solution, although it mutates the input object and doesn't return a new one, as I would've wanted. Hence why I added the deepCopy function.
Also, the order isn't maintained. But I assume that isn't of the biggest concern if you are using objects in the first place.
const defaultOptions = {
a: 0,
b: 1,
c: {
hello: 'world',
age: 20
}
}
const specialOptions = {
b: 0,
c: {
age: 10
},
d: 1
}
const deepCopy = obj => JSON.parse(JSON.stringify(obj))
const options = deepCopy(specialOptions)
const extendObj = (defaults, obj) => {
Object.entries(defaults)
.forEach(([key, value]) => {
if (obj[key] === undefined) {
obj[key] = value
} else if (typeof value === 'object') {
extendObj(defaults[key], obj[key])
}
})
}
extendObj(defaultOptions, options)
console.log(options)
I wanted to contribute a fix for this to the lodash repo but thought I should check that I'm not doing something wrong first...
When I use standard lodash in this example...
const _ = require('lodash');
run = () => {
const mapping = {
a: 'hello',
b: 'world'
};
const object = {
a: { value: true },
b: { value: false }
};
// this is the original transform function that takes three arguments...
// 1. the object to be transformed
// 2. the transform function
// 3. the accumulator object
const transformed = _.transform(
object,
(a, v, k, o) => { a[mapping[k]] = _.get(v, 'value'); },
{}
);
console.log(transformed);
};
run();
The output is { hello: true, world: false } like I expected.
When logging a, v, k, and o on the above code the output is...
1 a: {}
1 v: { value: true }
1 k: a
1 o: { a: { value: true }, b: { value: false } }
2 a: { hello: true }
2 v: { value: false }
2 k: b
2 o: { a: { value: true }, b: { value: false } }
However, when I run (what I think is) the equivalent code using lodash/fp...
const _ = require('lodash/fp');
run = () => {
const mapping = {
a: 'hello',
b: 'world'
};
const object = {
a: { value: true },
b: { value: false }
};
// this is the fp transform function that takes two arguments...
// 1. the transform function
// 2. the accumulator object
// it then returns a function that takes one argument...
// 1. the object to be transformed
const transformed = _.transform(
(a, v, k, o) => { a[mapping[k]] = _.get('value')(v); },
{}
)(object);
console.log(transformed);
};
run();
The output is { undefined: false }. This is because the parameters to the iterator do not seem to be correct. When I log a, v, k, and o I get the following output...
1 a: {}
1 v: { value: true }
1 k: undefined
1 o: undefined
2 a: { undefined: true }
2 v: { value: false }
2 k: undefined
2 o: undefined
Am I doing something wrong or is this not working as expected?
I have also added this as an issue on the repo but thought I'd add here as maybe I would get a faster response :D
https://github.com/lodash/lodash/issues/4381
Try this:
const transform = _.transform.convert({ cap: false });
const transformed = transform(
(a, v, k, o) => { a[mapping[k]] = _.get('value')(v); },
{}
)(object);
pen
OK, it's very odd but I can get it working.
When using lodash/fp the autocompletion of the iteratee shows the function signature like...
function(accumulator, currentValue) {}
So it will only accept two arguments (which is what is said in the documentation linked to by #charlietfl).
However, when I create the function like this...
function(a, v) {
console.log(arguments.length);
}
It outputs 4.
So I kept exploring...
function(a, v) {
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
console.log(arguments[3]);
}
This outputs...
1 a: {}
1 v: { value: true }
1 k: a
1 o: { a: { value: true }, b: { value: false } }
2 a: {}
2 v: { value: false }
2 k: b
2 o: { a: { value: true }, b: { value: false } }
Just like I wanted it to. So, even though the function is only declared with 2 arguments and only accepts 2 parameters, 4 arguments are actually passed into it.
So, when I update the code like this...
function(a, v) {
const k = arguments[2];
a[mapping[k]] = v.value;
}
This returns { hello: true, world: false } which is what I was hoping to get in the first place.
I can get around it this way but don't understand why this is happening. So, because of that I'm going to stick with my current method of mapKeys followed by mapValues and TBH... I'll probably be looking at dropping lodash in the near future and writing my own functions to replace this functionality.
I have a specific use case where I want to do a nested de-structuring and assign an alias (rename it to another variable name, say aliasD) as well as a default value to a property. E.g.
const a = { b: { c: [{ d: 'value' }] } };
and while destructuring I only need d but with an alias aliasD and a default value defaultVal. SO I tried below, but I am not sure what I am missing
const a = { b: { c: [{ d: 'value' }] } };
const { b: { c: [first: { d: aliasD = defaultVal }] } } = a;
console.log(aliasD);
But this doesn't work
The problem here is for destructuring the array, the correct syntax to get the first value of the array would be:
[varName] = yourArray
Applying that to your example:
const { b: { c: [{ d: aliasD = 'test' }] } } = a;
You can try it out with Babel REPL