Related
I'm attempting to write a function that will loop through a deeply nested object, and create a shallow object by concatenating parent/child keys.
For example, if we have the object:
let original = {
a: {
b: "",
c: {
d: "",
e: ""
},
f: "",
},
g: ""
}
Then I would like the outcome to be this:
let result = {
"a[b]": "",
"a[c][d]": "",
"a[c][e]": "",
"a[f]": "",
"g": ""
}
I've got as far as the code snippet below, but it's not quite correct.
let original = {
a: {
b: "",
c: {
d: "",
e: ""
},
f: "",
},
g: ""
}
function flattenData(obj) {
let result = {};
for (let i in obj) {
if ((typeof obj[i]) === 'object') {
let temp = this.flattenData(obj[i])
for (let j in temp) {
result[`[${i}][${j}]`] = temp[j];
}
} else {
result[i] = obj[i];
}
}
return result;
}
console.log(flattenData(original));
We can use a recursive approach as you have done, we'll keep a path array and a result object to keep our state as we recurse through the object, this should give us the result we desire.
Note: I believe the last property in the result should be "g": "" rather than "a[g]": "" since g is not a property of a in the original object.
let original = {
a: {
b: "",
c: {
d: "",
e: ""
},
f: "",
},
g: ""
}
function flattenData(obj, path = [], result = {}) {
for(let k in obj) {
if (typeof(obj[k]) === 'object') {
flattenData(obj[k], [...path, k], result)
} else {
const resultKey = [...path, k].reduce((acc,s,i) => acc + (i ? `[${s}]`: s) );
result[resultKey] = obj[k]
}
}
return result;
}
console.log('Result =', flattenData(original))
You can flatten the nested object using array#reduce and Object.entries() in a recursive manner.
const original = { a: { b: "", c: { d: "", e: "" }, f: "", }, g: "" },
objectCondition = val => typeof val === 'object' && val !== null,
flatten = (obj, prefix = "") => {
return Object.entries(obj).reduce((r, [key, val]) => {
const prop = prefix ? `${prefix}[${key}]`: key;
const o = objectCondition(val) ? flatten(val, prop) : {[prop]: val};
return {...r, ...o};
}, {});
}
console.log(flatten(original));
This question already has answers here:
What is the most efficient way to deep clone an object in JavaScript?
(67 answers)
Closed 3 years ago.
I am trying to implement a clone function but I am not sure if I am doing it right while trying to clone '[object Function]'. You will see the result at the bottom. I am not sure if desired result should look like the original input data. Let me know what you think and if you have any ideas on how to implement it. Here is the code.
UPD: actually it works as it supposed to be working. I am going to leave it here so people can use it if they have the same question.
function deep(value) {
if (typeof value !== 'object' || value === null) {
return value;
}
if (Array.isArray(value)) {
return deepArray(value);
}
return deepObject(value);
}
function deepObject(source) {
const result = {};
Object.keys(source).forEach(key => {
const value = source[key];
result[key] = deep(value);
});
return result;
}
function deepArray(collection) {
return collection.map(value => {
return deep(value);
});
}
const id1 = Symbol('id');
const value = {
a: 2,
f: id1,
b: '2',
c: false,
g: [
{ a: { j: undefined }, func: () => {} },
{ a: 2, b: '2', c: false, g: [{ a: { j: undefined }, func: () => {} }] }
]
};
RESULT
{ a: 2,
f: Symbol(id),
b: '2',
c: false,
g:
[ { a: { j: undefined }, func: [Function: func] },
{ a: 2,
b: '2',
c: false,
g: [ { a: { j: undefined }, func: [Function: func] } ] } ] }
You cannot clone an arrow function, when you clone an object that has arrow functions as properties they will always be bound to the object they were created in, you cannot rebind them, that is the whole point of an arrow function, predictable behaviour of the this object. If you want to clone objects then make sure that any functions that refer to this are normal functions and not arrow functions.
Better use below single code for deepcopy -
function deepCopy(oldObj) {
var newObj = oldObj;
if (oldObj && typeof oldObj === "object") {
newObj = Object.prototype.toString.call(oldObj) === "[object Array]" ? [] : {};
for (var i in oldObj) {
newObj[i] = this.deepCopy(oldObj[i]);
}
}
return newObj;
}
I'd like to merge two similar but not identical objects and override null values in one of them, if such exist. For example I'd have these two objects:
const obj1 = {
a: 1,
b: '',
c: [],
d: null
}
const obj2 = {
a: 2,
b: null,
d: 1
}
And the effect of merge should be:
const objMerged = {
a: 2,
b: '',
c: [],
d: 1
}
In other words, the most important source of data in the merged object is obj2 but it lacks some properties from obj1, so they need to be copied and also some of the obj2 values are null so they should be taken from obj1 as well.
EDIT
I tried:
_.extend({}, obj1, obj2)
and
Object.assign({}, obj1, obj2)
You could also mix and match with ES6 destructuring and lodash _.omitBy:
const obj1 = { a: 1, b: '', c: [], d: null }
const obj2 = { a: 2, b: null, d: 1 }
const result = {..._.omitBy(obj1, _.isNull), ..._.omitBy(obj2, _.isNull)}
console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
You could also do it with ES6 only like this:
const obj1 = { a: 1, b: '', c: [], d: null }
const obj2 = { a: 2, b: null, d: 1 }
let omitNull = obj => {
Object.keys(obj).filter(k => obj[k] === null).forEach(k => delete(obj[k]))
return obj
}
const result = { ...omitNull(obj1), ...omitNull(obj2) }
console.log(result)
To add to this list of good answers, here's a recursive solution that will work with nested structures.
This example will merge the common properties of the dst object to the src object in all levels of nesting, leaving any properties that are not common intact.
const merge = (dst, src) => {
Object.keys(src).forEach((key) => {
if (!dst[key]) {
dst[key] = src[key];
} else if (typeof src[key] === 'object' && src[key] !== null && typeof dst[key] === 'object' && dst[key] !== null) {
merge(dst[key], src[key]);
}
});
},
/* Usage: */
src = {
prop1: '1',
prop2: {
val: 2,
}
},
dst = {
prop1: null,
prop2: {
val: null,
},
prop3: null,
};
merge(dst, src);
console.log(dst);
You can use _.mergeWith(), and in the merge callback only take the 2nd value if it's not null:
const obj1 = { a: 1, b: '', c: [], d: null }
const obj2 = { a: 2, b: null, d: 1 }
const result = _.mergeWith({}, obj1, obj2, (o, s) => _.isNull(s) ? o : s)
console.log(result)
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.11/lodash.min.js"></script>
Here is a pure JS based solution:
Iterate through the first object to replace values from second object, then add the additional values from the second object.
const obj1 = {
a: 1,
b: '',
c: [],
d: null
}
const obj2 = {
a: 2,
b: null,
d: 1
}
function mergeObjs(obj1, obj2){
const merged = {}
keys1 = Object.keys(obj1);
keys1.forEach(k1 => {
merged[k1] = obj2[k1] || obj1[k1]; // replace values from 2nd object, if any
})
Object.keys(obj2).forEach(k2 => {
if (!keys1.includes(k2)) merged[k2] = obj[k2]; // add additional properties from second object, if any
})
return merged
}
console.log(mergeObjs(obj1, obj2))
Using Lodash by create() and omitBy()
const obj1 = {"a":1,"b":"","c":[],"d":null}
const obj2 = {"a":2,"b":null,"d":1}
const objMerged = _.create(
_.omitBy(obj1, _.isNull),
_.omitBy(obj2, _.isNull)
)
console.log(objMerged)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
If you're interested in only the first level of the two objects you could do something like this:
const obj1 = {
a: 1,
b: '',
c: [],
d: null
}
const obj2 = {
a: 2,
b: null,
d: 1
}
const merged = Object.keys(obj1).concat(Object.keys(obj2)) // create an array that contains the keys of the two objects.
.filter((k, i, arr) => arr.indexOf(k) === i) // remove duplicate keys
.reduce((a, c) => {
a[c] = obj1[c] !== null ? obj1[c] : obj2[c];
return a;
}, {});
console.log(merged);
This example only check for null values, you should probably extend it to check for others like undefined, empty strings, etc.
You did it the good way using Object.assign, just remove what you don't want right before
Object.keys(obj1).forEach( k => {
if ( obj1[k] //write the condition you want
delete obj1[k]
});
var objMerged = {};
for (var kobj1 in obj1) {
for (var kobj2 in obj2) {
if (obj1[kobj1] == null && obj2[kobj1] != null)
objMerged[kobj1] = obj2[kobj1];
else if (obj2[kobj2] == null && obj1[kobj2] != null)
objMerged[kobj2] = obj1[kobj2];
}
}
//Print objMerged to display
Suppose I have the following array of objects:
var list = [
{ a: 1,
b: { c: 'x', k: []}
},
{ a: 1,
b: {c: 'x', d: 8}
}
];
I want them to be merged into one "generic" object, for this example, it would be:
{a: 1, b: {c: 'x', d:'8', k[]}}
As you can see, all nested objects are merged too. But I can't gain it. If I use Object.assign it creates new nested objects if they are different, that is duplicates them:
var res = Object.assign({}, ...list);
// res: {
a: 1,
b: {c: 'x', k: []},
b: {c: 'x', d: 8}
}
You could try the following using the reduce method:
var list = [{
a: 1,
b: {
a: 4,
k: 3
}
}, {
a: 1,
s: 11,
b: {
ab: 4,
d: 8
}
}]
var result = list.reduce(function(acc, item) {
var obj = { ...item
}
Object.keys(obj).forEach(function(item) {
if (acc[item]) { //if a property with the the key, 'item' already exists, then append to that
Object.assign(acc[item], obj[item]);
} else { // else add the key-value pair to the accumulator object.
acc[item] = obj[item];
}
})
return acc;
}, {})
console.log(result);
Deep merging is not simple to do yourself, That blog uses deep merge.
If you don't have webpack or nodejs you can use deepmerge like so:
// see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25
var canUseSymbol = typeof Symbol === 'function' && Symbol.for
var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7
function isReactElement(value) {
return value.$$typeof === REACT_ELEMENT_TYPE
}
function isNonNullObject(value) {
return !!value && typeof value === 'object'
}
function isSpecial(value) {
var stringValue = Object.prototype.toString.call(value)
return stringValue === '[object RegExp]'
|| stringValue === '[object Date]'
|| isReactElement(value)
}
function defaultIsMergeableObject(value) {
return isNonNullObject(value)
&& !isSpecial(value)
}
function emptyTarget(val) {
return Array.isArray(val) ? [] : {}
}
function cloneUnlessOtherwiseSpecified(value, options) {
return (options.clone !== false && options.isMergeableObject(value))
? deepmerge(emptyTarget(value), value, options)
: value
}
function defaultArrayMerge(target, source, options) {
return target.concat(source).map(function(element) {
return cloneUnlessOtherwiseSpecified(element, options)
})
}
function mergeObject(target, source, options) {
var destination = {}
if (options.isMergeableObject(target)) {
Object.keys(target).forEach(function(key) {
destination[key] = cloneUnlessOtherwiseSpecified(target[key], options)
})
}
Object.keys(source).forEach(function(key) {
if (!options.isMergeableObject(source[key]) || !target[key]) {
destination[key] = cloneUnlessOtherwiseSpecified(source[key], options)
} else {
destination[key] = deepmerge(target[key], source[key], options)
}
})
return destination
}
function deepmerge(target, source, options) {
options = options || {}
options.arrayMerge = options.arrayMerge || defaultArrayMerge
options.isMergeableObject = options.isMergeableObject || defaultIsMergeableObject
var sourceIsArray = Array.isArray(source)
var targetIsArray = Array.isArray(target)
var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray
if (!sourceAndTargetTypesMatch) {
return cloneUnlessOtherwiseSpecified(source, options)
} else if (sourceIsArray) {
return options.arrayMerge(target, source, options)
} else {
return mergeObject(target, source, options)
}
}
deepmerge.all = function deepmergeAll(array, options) {
if (!Array.isArray(array)) {
throw new Error('first argument should be an array')
}
return array.reduce(function(prev, next) {
return deepmerge(prev, next, options)
}, {})
}
var list = [{
a: 1,
b: {
c: 'x',
//merging 1,2 and 1,3 results in [1,2,1,3] you can change that in defaultArrayMerge
k: [1,2]
}
},
{
a: 1,
b: {
c: 'x',
k: [1,3],
d: 8
}
}];
console.log(
deepmerge.all(list)
)
You can use the reduce method. Remove the first element from the original list , that object will be the base method.
var list = [{
a: 1,
b: {
c: 'x',
k: []
}
},
{
a: 1,
b: {
c: 'x',
d: 8
}
}
];
// Remove the first element from the array. The first element will be
// the base object
// slice will return a new array without the first object
// apply reduce on this list
let _temp = list.slice(1);
let x = _temp.reduce(function(acc,curr,currIndex){
for(let keys in curr){
// checking if the base object have the same key as of current object
if(acc.hasOwnProperty(keys)){
// if base object and current object has the key then
// check if the type is an object
if(typeof curr[keys] ==='object'){
// now get the key from both the object
// & check which one is missong. Add that key and value to the
// base object
let keysFromACC = Object.keys(acc[keys]);
let keysFromCURR = Object.keys(curr[keys]);
keysFromCURR.forEach(function(item){
if(keysFromACC.indexOf(item) ===-1){
acc[keys][item] = curr[keys][item]
}
})
}
}
else{
// if the base object does not have key which current object
// has then add the key to base object
acc[keys]= curr[keys]
}
}
return acc;
},list[0]);
console.log(x)
I am trying to remove empty objects inside an object, here is an example with the expected output:
var object = {
a: {
b: 1,
c: {
a: 1,
d: {},
e: {
f: {}
}
}
},
b: {}
}
var expectedResult = {
a: {
b: 1,
c: {
a: 1,
}
}
}
I tried using some examples from other StackOverflow questions, however those are just for one level objects.
Basic function that removes empty objects
First start with a function that only works with a single level of nesting.
This function removes all properties that reference an empty object:
function clearEmpties(o) {
for (var k in o) {
if (!o[k] || typeof o[k] !== "object") {
continue // If null or not an object, skip to the next iteration
}
// The property is an object
if (Object.keys(o[k]).length === 0) {
delete o[k]; // The object had no properties, so delete that property
}
return o;
}
}
Handling nested objects using recursion
Now you want to make it recursive so that it will operate on nested objects. So we already have tested if o[k] is an object, and we've tested if there are properties, so if there are, we simply call the function again with that nested object.
function clearEmpties(o) {
for (var k in o) {
if (!o[k] || typeof o[k] !== "object") {
continue // If null or not an object, skip to the next iteration
}
// The property is an object
clearEmpties(o[k]); // <-- Make a recursive call on the nested object
if (Object.keys(o[k]).length === 0) {
delete o[k]; // The object had no properties, so delete that property
}
}
return o;
}
So just as the original call to clearEmpties removes properties of the given object that reference an empty object, likewise the recursive call will do the same for the nested objects.
Live demo:
var object = {
a: {
b: 1,
c: {
a: 1,
d: {},
e: { // will need to be removed after f has been removed
f: {}
}
}
},
b: {}
};
clearEmpties(object);
console.log(object);
function clearEmpties(o) {
for (var k in o) {
if (!o[k] || typeof o[k] !== "object") {
continue
}
clearEmpties(o[k]);
if (Object.keys(o[k]).length === 0) {
delete o[k];
}
}
return o;
}
Short version using Underscore and functional style
function clearEmpties(o) {
if (_.isFunction(o) || !_.isObject(o)) return o;
return _.chain(o)
.mapObject(clearEmpties)
.pick(p => !(_.isObject(p) && _.isEmpty(p)))
.value();
}
Short version using lodash and functional style - works with treeshaking
import { isFunction, isObject, isEmpty, isArray, isPlainObject, fromPairs } from "lodash-es";
const removeEmtpyObjects = (o) => {
if (isFunction(o) || !isPlainObject(o)) return o;
if (isArray(o)) return o.map(removeEmtpyObjects);
return fromPairs(
Object.entries(o)
.map(([k, v]) => [k, removeEmtpyObjects(v)])
.filter(([k, v]) => !(v == null || (isObject(v) && isEmpty(v))))
);
};
I had this same problem and with the addition that my object may contain arrays with empty elements that need to be removed as well.
I ended up with this quick and dirty solution.
If you want to define what "empty" means to you, I also added a different function. In my case, I also needed empty strings.
function isEmpty(obj) {
if (obj === '' || obj === null || JSON.stringify(obj) === '{}' || JSON.stringify(obj) === '[]' || (obj) === undefined || (obj) === {}) {
return true
} else {
return false
}
}
function removeEmpty(o) {
if (typeof o !== "object") {
return o;
}
let oKeys = Object.keys(o)
for (let j = 0; j < oKeys.length; j++) {
let p = oKeys[j]
switch (typeof (o[p])) {
case 'object':
if (Array.isArray(o[p])) {
for (let i = 0; i < o[p].length; i++) {
o[p][i] = removeEmpty(o[p][i])
if (isEmpty(o[p][i])) {
o[p].splice(i, 1)
i--
}
}
if (o[p].length === 0) {
if (Array.isArray(o)) {
o.splice(parseInt(p), 1)
j--
} else {
delete o[p]
}
}
} else {
if (isEmpty(o[p])) {
delete o[p]
} else {
o[p] = removeEmpty(o[p])
if (isEmpty(o[p])) {
delete o[p]
}
}
}
break
default:
if (isEmpty(o[p])) {
delete o[p]
}
break
}
}
if (Object.keys(o).length === 0) {
return
}
return o
}
Input:
var a = {
b: 1,
c: {
d: [1, [[], [], [[[1], []]]], [2, [[], [[]]]], [], [[]]]
},
e: {
f: [{}, { g: 1 }]
},
h: {
i: { j: { k: undefined, l: null, m: { n: "", o: 1 } } }
},
p: { q: { r: 1 } }
}
removeEmpty(a)
Output:
{
"b": 1,
"c": {
"d": [1, [[[[1]]]], [2]]
},
"e": {
"f": [{"g": 1}]
},
"h": {
"i": {
"j": {
"m": {
"o": 1
}
}
}
},
"p": {
"q": {
"r": 1
}
}
}
function clean(obj) {
for (var propName in obj) {
if (obj[propName] === null || obj[propName] === undefined) {
delete obj[propName]; }
}
}
EDIT:
function clean(obj) {
for (var propName in obj) {
if(typeof obj[propName]=="object")
clean(obj[propName])
if (obj[propName] === null || obj[propName] === undefined)
delete obj[propName];
}
}