This question already has answers here:
JavaScript merging objects by id [duplicate]
(18 answers)
Closed 3 years ago.
I have an array:
[
{
assignmentId:17,
email:"john.smith#email.com"
expectation: "Make sure to proofread!",
firstName:"John"
id:23
ignoreForFeedback: true
lastName:"Smith"
level:2
levelFraction:null
score:35
},
{
assignmentId:17
countsPerCategory: Array(4)
email:"john.smith#email.com"
firstName:"John"
frequentErrors: Array(5)
id:23
ignoreForGrading: true
lastName:"Smith"
},
{
assignmentId:17,
email:"cl#email.com"
expectation: "cite sources",
firstName:"Cindy"
id:45
ignoreForFeedback: true
lastName:"Lee"
level:2
levelFraction:null
score:32
},
{
assignmentId:17
countsPerCategory: Array(4)
email:"cl#email.com"
firstName:"Cindy"
frequentErrors: Array(5)
id:45
ignoreForGrading: true
lastName:"Lee"
}
]
I want to combine the Objects with the same 'id' into the same object within the array. Their common keys should also be combined (eg: 'firstName', 'email'). Can someone suggest the best way to do this? Either with ES6 or Lodash
You can use lodash#groupBy to group all items in the array by id and then use lodash#map with an iteratee of lodash#assign that is wrapped with a lodash#spread to make the array callback as a list of arguments for lodash#assgin.
var result = _(array)
.groupBy('id')
.map(_.spread(_.assign))
.value();
var array = [
{
assignmentId:17,
email:"john.smith#email.com",
expectation: "Make sure to proofread!",
firstName:"John",
id:23,
ignoreForFeedback: true,
lastName:"Smith",
level:2,
levelFraction:null,
score:35
},
{
assignmentId:17,
countsPerCategory: Array(4),
email:"john.smith#email.com",
firstName:"John",
frequentErrors: Array(5),
id:23,
ignoreForGrading: true,
lastName:"Smith"
},
{
assignmentId:17,
email:"cl#email.com",
expectation: "cite sources",
firstName:"Cindy",
id:45,
ignoreForFeedback: true,
lastName:"Lee",
level:2,
levelFraction:null,
score:32
},
{
assignmentId:17,
countsPerCategory: Array(4),
email:"cl#email.com",
firstName:"Cindy",
frequentErrors: Array(5),
id:45,
ignoreForGrading: true,
lastName:"Lee"
}
];
var result = _(array)
.groupBy('id')
.map(_.spread(_.assign))
.value();
console.log(result);
body > div { min-height: 100%; top: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
Here's an alternative solution that uses Array#filter which takes advantage of the 2nd argument of the Array#filter which gives context to the filter's callback function. We use the this context as a mechanism to store cached objects by their id and then use this to decide whether to retain these objects from the array or not.
var result = array.filter(function(v) {
return this[v.id]?
!Object.assign(this[v.id], v):
(this[v.id] = v);
}, {});
var array = [
{
assignmentId:17,
email:"john.smith#email.com",
expectation: "Make sure to proofread!",
firstName:"John",
id:23,
ignoreForFeedback: true,
lastName:"Smith",
level:2,
levelFraction:null,
score:35
},
{
assignmentId:17,
countsPerCategory: Array(4),
email:"john.smith#email.com",
firstName:"John",
frequentErrors: Array(5),
id:23,
ignoreForGrading: true,
lastName:"Smith"
},
{
assignmentId:17,
email:"cl#email.com",
expectation: "cite sources",
firstName:"Cindy",
id:45,
ignoreForFeedback: true,
lastName:"Lee",
level:2,
levelFraction:null,
score:32
},
{
assignmentId:17,
countsPerCategory: Array(4),
email:"cl#email.com",
firstName:"Cindy",
frequentErrors: Array(5),
id:45,
ignoreForGrading: true,
lastName:"Lee"
}
];
var result = array.filter(function(v) {
// does this `id` exist?
return this[v.id]?
// assign existing object with the same id
// from the `this` cache object. Make sure
// to negate the resulting object with a `!`
// to remove this value from the array
!Object.assign(this[v.id], v):
// Assign the value from the `this` cache.
// This also retains this value from the existing
// array
(this[v.id] = v);
}, {});
console.log(result);
body > div { min-height: 100%; top: 0; }
You can use JavaScript's built in Array.reduce() method. The idea is you can create a map with the IDs and use lodash.merge() method (or whatever method you choose for merging objects) to merge all of the objects with the same ID into a single object. Then you can use .map() on the idMap you created to get the objects back into a single array.
var data = [{
assignmentId: 17,
email: "john.smith#email.com",
expectation: "Make sure to proofread!",
firstName: "John",
id: 23,
ignoreForFeedback: true,
lastName: "Smith",
level: 2,
levelFraction: null,
score: 35
},
{
assignmentId: 17,
countsPerCategory: Array(4),
email: "john.smith#email.com",
firstName: "John",
frequentErrors: Array(5),
id: 23,
ignoreForGrading: true,
lastName: "Smith"
},
{
assignmentId: 17,
email: "cl#email.com",
expectation: "cite sources",
firstName: "Cindy",
id: 45,
ignoreForFeedback: true,
lastName: "Lee",
level: 2,
levelFraction: null,
score: 32
},
{
assignmentId: 17,
countsPerCategory: Array(4),
email: "cl#email.com",
firstName: "Cindy",
frequentErrors: Array(5),
id: 45,
ignoreForGrading: true,
lastName: "Lee"
}
];
var idMap = data.reduce(function(result, current) {
if (result[current.id] == null) {
result[current.id] = current;
} else {
_.merge(result[current.id], current);
}
return result;
}, {});
var results = Object.keys(idMap).map(function(key) {
return idMap[key];
});
console.log(results);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
What I can suggest is to use a combination of forEach() and some() methods to iterate the array elements and test if the iterated object id is already processed or not.
This is the solution:
var merged = [];
arr.forEach(function(item) {
var idx;
var found = merged.some(function(el, i) {
idx = el.id === item.id ? i : null;
return el.id === item.id;
});
if (!found) {
merged.push(item);
} else if (idx !== null) {
for (k in Object.keys(item)) {
if (item.hasOwnProperty(k)) {
merged[idx][k] = item[k];
}
}
}
});
Working Demo:
var arr = [{
assignmentId: 17,
email: "john.smith#email.com",
expectation: "Make sure to proofread!",
firstName: "John",
id: 23,
ignoreForFeedback: true,
lastName: "Smith",
level: 2,
levelFraction: null,
score: 35
},
{
assignmentId: 17,
countsPerCategory: [],
email: "john.smith#email.com",
firstName: "John",
frequentErrors: [],
id: 23,
ignoreForGrading: true,
lastName: "Smith"
},
{
assignmentId: 17,
email: "cl#email.com",
expectation: "cite sources",
firstName: "Cindy",
id: 45,
ignoreForFeedback: true,
lastName: "Lee",
level: 2,
levelFraction: null,
score: 32
},
{
assignmentId: 17,
countsPerCategory: [],
email: "cl#email.com",
firstName: "Cindy",
frequentErrors: [],
id: 45,
ignoreForGrading: true,
lastName: "Lee"
}
];
var merged = [];
arr.forEach(function(item) {
var idx;
var found = merged.some(function(el, i) {
idx = el.id === item.id ? i : null;
return el.id === item.id;
});
if (!found) {
merged.push(item);
} else if (idx !== null) {
for (k in Object.keys(item)) {
if (item.hasOwnProperty(k)) {
merged[idx][k] = item[k];
}
}
}
});
console.log(merged);
Thank you for your help everyone, but I ended up going with my own implementation.
let ids = [];
let combinedUsers = [];
users.forEach(function (user) {
ids.push(user.id);
});
ids = _.uniq(ids);
ids.forEach(function(id){
let user = users.filter(function(userObj){
return id === userObj.id
});
if(user.length > 1){
user = Object.assign(user[0], user[1]);
combinedUsers.push(user);
} else {
combinedUsers.push(user[0]);
}
});
return combinedStudents;
Related
I have two Javascript objects
var order1 = {
sandwich: 'tuna',
chips: true,
drink: 'soda',
order: 1,
toppings: [{VendorNumber: 18, PreferredFlag: false, SupportedFlag: true}, {VendorNumber: 19, PreferredFlag: false, SupportedFlag: true}, {VendorNumber: 20, PreferredFlag: false, SupportedFlag: true}],
details: {
name: 'Chris',
phone: '555-555-5555',
email: 'no#thankyou.com'
},
otherVal1: '1'
};
var order2 = {
sandwich: 'turkey',
chips: true,
drink: 'soda',
order: 2,
toppings: [{VendorNumber: 18, PreferredFlag: false, SupportedFlag: true}, {VendorNumber: 19, PreferredFlag: false, SupportedFlag: false}, {VendorNumber: 20, PreferredFlag: true, SupportedFlag: true}],
details: {
name: 'Jon',
phone: '(555) 555-5555',
email: 'yes#please.com'
},
otherVal1: '2'
};
What I need is to compare these two objects (order1 is existing and order2 is the edited data) and store the difference in a new variable named var order3. However if there is an array inside an object like the toppings array to be copied as whole with the changes.
In short the result should be
{
details: {
email: "yes#please.com",
name: "Jon",
phone: "(555) 555-5555"
},
order: 2,
otherVal1: "2",
sandwich: "turkey",
toppings: [{
PreferredFlag: false,
SupportedFlag: true,
VendorNumber: 18
}, {
PreferredFlag: false,
SupportedFlag: false,
VendorNumber: 19
}, {
PreferredFlag: true,
SupportedFlag: true,
VendorNumber: 20
}]
}
How can i achieve this ?
This gives you exactly what you wanted:
function diff(tgt, src) {
if (Array.isArray(tgt)) { // if you got array
return tgt; // just copy it
}
// if you got object
var rst = {};
for (var k in tgt) { // visit all fields
if (typeof src[k] === "object") { // if field contains object (or array because arrays are objects too)
rst[k] = diff(tgt[k], src[k]); // diff the contents
} else if (src[k] !== tgt[k]) { // if field is not an object and has changed
rst[k] = tgt[k]; // use new value
}
// otherwise just skip it
}
return rst;
}
console.log(diff(order2, order1));
I think you are looking for a diff'ing algorithm. Wrote this quick recursive function that iterates over each enumerable property of your JavaScript object (not json object) testing equality. Note that the position of arguments does affect the output
function diff(obj1, obj2) {
if (typeof obj1 === "object") {
const obj = {};
for (const prop in obj1) {
if (diff(obj1[prop], obj2[prop])) {
obj[prop] = obj1[prop]
}
}
return obj
} else {
return obj1 !== obj2;
}
}
console.log(diff(order2, order1))
{
"ethereum": {
"balance":"2",
"value":1382.4,
"id":"ethereum",
"name":"Ethereum",
"symbol":"ETH",
"rank":"2",
"price_usd":"691.204",
"24h_volume_usd":"2420600000.0",
"percent_change_1h":"0.02",
"percent_change_24h":"0.51",
"percent_change_7d":"0.98",
"percentage":14.34
},
"bitcoin": {
"balance":"1",
"value":8255.95,
"id":"bitcoin",
"name":"Bitcoin",
"symbol":"BTC",
"rank":"1",
"price_usd":"8255.96",
"24h_volume_usd":"6128880000.0",
"percent_change_1h":"0.02",
"percent_change_24h":"0.43",
"percent_change_7d":"-3.49",
"percentage":85.66
}
}
The above object was converted from this Array below then saved into localStorage.
What I'm trying to do is re-create the following Array:
[
{
24h_volume_usd: "6124340000.0",
balance: "1",
id: "bitcoin",
name: "Bitcoin",
percent_change_1h: "-0.1",
percent_change_7d: "-3.46",
percent_change_24h: "0.47",
percentage: 85.66,
price_usd: "8256.98",
rank: "1",
symbol: "BTC",
value: 8256.98
},
{
4h_volume_usd: "2420170000.0",
balance: "2",
id: "ethereum",
name: "Ethereum",
percent_change_1h: "-0.07",
percent_change_7d: "0.95",
percent_change_24h: "0.49",
percentage: 14.34,
price_usd: "691.074",
rank: "2",
symbol: "ETH",
value: 1382.14
}
]
The Array to Object logic
export const calculatePercentage = (portfolio, coin) => {
portfolio.push(coin);
const addValue = c => c.value;
const values = R.chain(addValue, portfolio);
const total = values.reduce((acc, val) => acc + val);
const updatedPortfolio = portfolio.map((c) => {
c.percentage = round((c.value / total) * 100);
return c;
});
const moonPortfolio = arrayToObject(updatedPortfolio);
// Local Storage saved here:
window.localStorage.setItem('moonPortfolio', JSON.stringify(moonPortfolio));
return updatedPortfolio;
};
You can use the Object.values method to get all values in the object in an array:
const object = {
"ethereum": {
"balance":"2",
"value":1382.4,
"id":"ethereum",
"name":"Ethereum",
"symbol":"ETH",
"rank":"2",
"price_usd":"691.204",
"24h_volume_usd":"2420600000.0",
"percent_change_1h":"0.02",
"percent_change_24h":"0.51",
"percent_change_7d":"0.98",
"percentage":14.34
},
"bitcoin": {
"balance":"1",
"value":8255.95,
"id":"bitcoin",
"name":"Bitcoin",
"symbol":"BTC",
"rank":"1",
"price_usd":"8255.96",
"24h_volume_usd":"6128880000.0",
"percent_change_1h":"0.02",
"percent_change_24h":"0.43",
"percent_change_7d":"-3.49",
"percentage":85.66
}
}
const array = Object.values(object)
console.log(array)
Object.values is what you are looking for.
The Object.values() method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in
var o = {
"ethereum": {
"balance":"2",
"value":1382.4,
"id":"ethereum",
"name":"Ethereum",
"symbol":"ETH",
"rank":"2",
"price_usd":"691.204",
"24h_volume_usd":"2420600000.0",
"percent_change_1h":"0.02",
"percent_change_24h":"0.51",
"percent_change_7d":"0.98",
"percentage":14.34
},
"bitcoin": {
"balance":"1",
"value":8255.95,
"id":"bitcoin",
"name":"Bitcoin",
"symbol":"BTC",
"rank":"1",
"price_usd":"8255.96",
"24h_volume_usd":"6128880000.0",
"percent_change_1h":"0.02",
"percent_change_24h":"0.43",
"percent_change_7d":"-3.49",
"percentage":85.66
}
};
var x = Object.values(o);
console.log(x)
The below code can also be used to get the array containing the objects.
// Object to string conversion (just to test)
var stringifiedObj = JSON.stringify({
"ethereum":{
"balance":"2",
"value":1382.4,
"id":"ethereum",
"name":"Ethereum",
"symbol":"ETH",
"rank":"2",
"price_usd":"691.204",
"24h_volume_usd":"2420600000.0",
"percent_change_1h":"0.02",
"percent_change_24h":"0.51",
"percent_change_7d":"0.98",
"percentage":14.34
},
"bitcoin": {
"balance":"1",
"value":8255.95,
"id":"bitcoin",
"name":"Bitcoin",
"symbol":"BTC",
"rank":"1",
"price_usd":"8255.96",
"24h_volume_usd":"6128880000.0",
"percent_change_1h":"0.02",
"percent_change_24h":"0.43",
"percent_change_7d":"-3.49",
"percentage":85.66
}
});
var obj = JSON.parse(stringifiedObj); // string formed object to real object conversion
var arr = []; // Empty array
for(var key in obj){
arr.push(obj[key]); // Push item(object) into array
}
console.log(arr);
/*
[ { balance: '2',
value: 1382.4,
id: 'ethereum',
name: 'Ethereum',
symbol: 'ETH',
rank: '2',
price_usd: '691.204',
'24h_volume_usd': '2420600000.0',
percent_change_1h: '0.02',
percent_change_24h: '0.51',
percent_change_7d: '0.98',
percentage: 14.34 },
{ balance: '1',
value: 8255.95,
id: 'bitcoin',
name: 'Bitcoin',
symbol: 'BTC',
rank: '1',
price_usd: '8255.96',
'24h_volume_usd': '6128880000.0',
percent_change_1h: '0.02',
percent_change_24h: '0.43',
percent_change_7d: '-3.49',
percentage: 85.66 } ]
*/
Thanks.
It can also be done during parsing:
var j = '{"ethereum":{"balance":"2","value":1382.4,"id":"ethereum","name":"Ethereum","symbol":"ETH","rank":"2","price_usd":"691.204","24h_volume_usd":"2420600000.0","percent_change_1h":"0.02","percent_change_24h":"0.51","percent_change_7d":"0.98","percentage":14.34},"bitcoin":{"balance":"1","value":8255.95,"id":"bitcoin","name":"Bitcoin","symbol":"BTC","rank":"1","price_usd":"8255.96","24h_volume_usd":"6128880000.0","percent_change_1h":"0.02","percent_change_24h":"0.43","percent_change_7d":"-3.49","percentage":85.66}}';
var a = [];
JSON.parse(j, function(k, v) {
if (v.id) a.push(v);
else return v;
})
console.log( a );
I already searched for a tutorial in Google but couldn't find what I needed.
I have an array like this:
[
{Username:'user1', Balance:'123'},
{Username:'user2', Balance:'213'},
{Username:'user1', Balance:'424'}
]
How to merge Balance when the Username is the same, for example merge Balance Username:'user1'
You can use a combination of higher-level built-in functions like Object.keys, Array#reduce, and Array#map to conditionally combine array entries when certain properties match.
var array = [{
Username: 'user1',
Balance: '123'
}, {
Username: 'user2',
Balance: '213'
}, {
Username: 'user1',
Balance: '424'
}]
var map = array.reduce(function (map, e) {
map[e.Username] = +e.Balance + (map[e.Username] || 0)
return map
}, {})
var result = Object.keys(map).map(function (k) {
return { Username: k, Balance: map[k] }
})
console.log(result)
Edit: OP requested that the answer be flexible enough to handle more than one property. I will leave my original snippet up as well, as in the end I think that one was more elegant.
var array = [{
Username: 'user1',
Balance: '123',
Another: '222'
}, {
Username: 'user2',
Balance: '213',
Another: '111'
}, {
Username: 'user1',
Balance: '424',
Another: '121'
}]
// Add elements to this array if you need to handle more properties
var properties = ['Balance', 'Another']
var map = array.reduce(function (map, e) {
map[e.Username] = properties.map(function (property, i) {
return +e[property] + ((map[e.Username] || [])[i] || 0)
})
return map
}, {})
var result = Object.keys(map).map(function (k) {
return map[k].reduce(function (object, e, i) {
object[properties[i]] = e
return object
}, { Username: k })
})
console.log(result)
You could use a single loop with a hash table for the reference to the objects with the same Username.
var data = [{ Username: 'user1', Balance: '123' }, { Username: 'user2', Balance: '213' }, { Username: 'user1', Balance: '424' }],
grouped = [];
data.forEach(function (hash) {
return function (o) {
if (!hash[o.Username]) {
hash[o.Username] = { Username: o.Username, Balance: 0 };
grouped.push(hash[o.Username]);
}
hash[o.Username].Balance += +o.Balance;
};
}(Object.create(null)));
console.log(grouped);
Here's one more solution, which I find a smidge less magicky than gyre's (but I'm also very interested by his.)
function mergeBalances(x) {
var users = [];
users = x.filter(function(entry) {
if(users[entry.Username]) { return false;}
users[entry.Username] = entry.Username;
return true;
})
.map(function(e) { return e.Username; } );
balances = {};
for(var i=0; i < users.length; i++) {
balances[i] = { Username:users[i]};
balances[i].Balance = x.filter(function(e) { return e.Username==users[i]; })
.reduce(function(total, e) { return total + eval(e.Balance);}, 0);
}
return balances;
}
// just call the function on your array
x = [ {Username:'user1', Balance:'123'}, {Username:'user2', Balance:'213'}, {Username:'user1', Balance:'424'} ]
console.log(mergeBalances(x));
I'm learning JS. Supposing I have the below array of objects:
var family = [
{
name: "Mike",
age: 10
},
{
name: "Matt"
age: 13
},
{
name: "Nancy",
age: 15
},
{
name: "Adam",
age: 22
},
{
name: "Jenny",
age: 85
},
{
name: "Nancy",
age: 2
},
{
name: "Carl",
age: 40
}
];
Notice that Nancy is showing up twice (changing only the age). Supposing I want to output only unique names. How do I output the above array of objects, without duplicates? ES6 answers more than welcome.
Related (couldn't find a good way for usage on objects):
Remove Duplicates from JavaScript Array
Easiest way to find duplicate values in a JavaScript array
EDIT Here's what I tried. It works well with strings but I can't figure how to make it work with objects:
family.reduce((a, b) => {
if (a.indexOf(b) < 0 ) {
a.push(b);
}
return a;
},[]);
You could use a Set in combination with Array#map and a spread operator ... in a single line.
Map returns an array with all names, which are going into the set initializer and then all values of the set are returned in an array.
var family = [{ name: "Mike", age: 10 }, { name: "Matt", age: 13 }, { name: "Nancy", age: 15 }, { name: "Adam", age: 22 }, { name: "Jenny", age: 85 }, { name: "Nancy", age: 2 }, { name: "Carl", age: 40 }],
unique = [...new Set(family.map(a => a.name))];
console.log(unique);
For filtering and return only unique names, you can use Array#filter with Set.
var family = [{ name: "Mike", age: 10 }, { name: "Matt", age: 13 }, { name: "Nancy", age: 15 }, { name: "Adam", age: 22 }, { name: "Jenny", age: 85 }, { name: "Nancy", age: 2 }, { name: "Carl", age: 40 }],
unique = family.filter((set => f => !set.has(f.name) && set.add(f.name))(new Set));
console.log(unique);
The Solution
Store occurrences of name external to the loop in an object, and filter if there's been a previous occurrence.
https://jsfiddle.net/nputptbb/2/
var occurrences = {}
var filteredFamily = family.filter(function(x) {
if (occurrences[x.name]) {
return false;
}
occurrences[x.name] = true;
return true;
})
you can also generalize this solution to a function
function filterByProperty(array, propertyName) {
var occurrences = {}
return array.filter(function(x) {
var property = x[propertyName]
if (occurrences[property]) {
return false;
}
occurrences[property]] = true;
return true;
})
}
and use it like
var filteredFamily = filterByProperty(family, 'name')
Explanation
Don't compare objects using indexOf, which only uses the === operator between objects. The reason why your current answer doesn't work is because === in JS does not compare the objects deeply, but instead compares the references. What I mean by that you can see in the following code:
var a = { x: 1 }
var b = { x: 1 }
console.log(a === b) // false
console.log(a === a) // true
Equality will tell you if you found the same exact object, but not if you found an object with the same contents.
In this case, you can compare your object on name since it should be a unique key. So obj.name === obj.name instead of obj === obj. Moreover another problem with your code that affects its runtime and not its function is that you use an indexOf inside of your reduce. indexOf is O(n), which makes the complexity of your algorithm O(n^2). Thus, it's better to use an object, which has O(1) lookup.
This will work fine.
const result = [1, 2, 2, 3, 3, 3, 3].reduce((x, y) => x.includes(y) ? x : [...x, y], []);
console.log(result);
With the code you mentioned, you can try:
family.filter((item, index, array) => {
return array.map((mapItem) => mapItem['name']).indexOf(item['name']) === index
})
Or you can have a generic function to make it work for other array of objects as well:
function printUniqueResults (arrayOfObj, key) {
return arrayOfObj.filter((item, index, array) => {
return array.map((mapItem) => mapItem[key]).indexOf(item[key]) === index
})
}
and then just use printUniqueResults(family, 'name')
(FIDDLE)
I just thought of 2 simple ways for Lodash users
Given this array:
let family = [
{
name: "Mike",
age: 10
},
{
name: "Matt",
age: 13
},
{
name: "Nancy",
age: 15
},
{
name: "Adam",
age: 22
},
{
name: "Jenny",
age: 85
},
{
name: "Nancy",
age: 2
},
{
name: "Carl",
age: 40
}
]
1. Find duplicates:
let duplicatesArr = _.difference(family, _.uniqBy(family, 'name'), 'name')
// duplicatesArr:
// [{
// name: "Nancy",
// age: 2
// }]
2 Find if there are duplicates, for validation purpose:
let uniqArr = _.uniqBy(family, 'name')
if (uniqArr.length === family.length) {
// No duplicates
}
if (uniqArr.length !== family.length) {
// Has duplicates
}
Since most of the answers won't have a good performance, i thought i share my take on this:
const arrayWithDuplicateData = [{ id: 5, name: 'Facebook'}, { id: 3, name: 'Twitter' }, { id: 5, name: 'Facebook' }];
const uniqueObj = {};
arrayWithDuplicateData.forEach(i => {
uniqueObj[i.id] = i;
});
const arrayWithoutDuplicates = Object.values(uniqueObj);
We're leveraging the fact that keys are unique within objects. That means the last duplication item inside the first array, will win over its predecessors. If we'd want to change that, we could flip the array before iterating over it.
Also we're not bound to use only one property of our object for identifying duplications.
const arrayWithDuplicateData = [{ id: 5, name: 'Facebook'}, { id: 3, name: 'Twitter' }, { id: 5, name: 'Facebook' }];
const uniqueObj = {};
arrayWithDuplicateData.forEach(item => {
uniqueObj[`${item.id}_${item.name}`] = item;
});
const arrayWithoutDuplicates = Object.values(uniqueObj);
Or we could simply add a check, if the uniqueObj already holds a key and if yes, not overwrite it.
Overall this way is not very costly in terms of performance and served me well so far.
I would probably set up some kind of object. Since you've said ECMAScript 6, you have access to Set, but since you want to compare values on your objects, it will take a little more work than that.
An example might look something like this (removed namespace pattern for clarity):
var setOfValues = new Set();
var items = [];
function add(item, valueGetter) {
var value = valueGetter(item);
if (setOfValues.has(value))
return;
setOfValues.add(value);
items.push(item);
}
function addMany(items, valueGetter) {
items.forEach(item => add(item, valueGetter));
}
Use it like this:
var family = [
...
];
addMany(family, item => item.name);
// items will now contain the unique items
Explanation: you need to pull a value from each object as it's added and decide if it has already been added yet, based on the value you get. It requires a value getter, which is a function that given an item, returns a value (item => item.name). Then, you only add items whose values haven't already been seen.
A class implementation:
// Prevents duplicate objects from being added
class ObjectSet {
constructor(key) {
this.key = key;
this.items = [];
this.set = new Set();
}
add(item) {
if (this.set.has(item[this.key])) return;
this.set.add(item[this.key]);
this.items.push(item);
}
addMany(items) {
items.forEach(item => this.add(item));
}
}
var mySet = new ObjectSet('name');
mySet.addMany(family);
console.log(mySet.items);
I'm looking for a way to convert this array of recursive objects into a flat array of objects to make it easier to work with.
[
{
"name": "bill",
"car": "jaguar",
"age": 30,
"profiles": [
{
"name": "stacey",
"car": "lambo",
"age": 23,
"profiles": [
{
"name": "martin",
"car": "lexus",
"age": 34,
"profiles": []
}
]
}
]
}
]
This is the expected output.
[
{
"name": "bill",
"car": "jaguar",
"age": 30,
},{
"name": "stacey",
"car": "lambo",
"age": 23,
},{
"name": "martin",
"car": "lexus",
"age": 34,
}
]
Each profiles array can have n amount of items, which may or may not have an empty array of sub profiles. Note the converted array objects don't contain profiles after the conversion.
I'm open to using underscore or lodash to achieve this.
Let's call your original data o, combining Array.prototype.reduce with recursion I came up with this:
o.reduce(function recur(accumulator, curr) {
var keys = Object.keys(curr);
keys.splice(keys.indexOf('profiles'), 1);
accumulator.push(keys.reduce(function (entry, key) {
entry[key] = curr[key];
return entry;
}, {}));
if (curr.profiles.length) {
return accumulator.concat(curr.profiles.reduce(recur, []));
}
return accumulator;
}, []);
I would use a recursive function and pass the resulting array in it to avoid working with globals, something in the lines of:
var target = [];
var extractElements(source, target) {
//TODO: check if source is array
for (var i=0; i<source.length; i++) {
// create a new element with our data
var newElement = {
name: source[i].name,
car: source[i].car,
age: source[i].age
};
// put it in our flattened array
target.push(newElement);
// check if we need to go deeper and pass our flattened array around
if (source[i].profiles instanceof Array &&
source[i].profiles.length>0)
extractElements(source[i].profiles, target);
}
}
console.log(target) // should list your elements nicely
I haven't tested it, so use it for inspiration but beware :)
(edit1: "var i" in for)
const _ = require('lodash')
const arrayFromObject = (currentObject, currentArray) => {
const {profiles, ...rest} = currentObject
if (!_.isEmpty(currentObject.profiles)) {
return arrayFromObject(currentObject.profiles!, [...currentArray, rest])
}
return [...currentArray, rest]
}
const flatArray = arrayFromObject(myRecursiveObject, [])
Hi this can also be tried...
var out = [];
var i=0;
var extract = function(s, out) {
if(s[0] == null){
i = out.length -1;
return false;
}else {
out.push(s[0]);
}
extract(s[0].profiles, out);
delete out[i--].profiles;
};
extract(a, out); /// here 'a' is the input array and 'out' output
console.log(out);
All the best...
var _ = require('lodash')
/**
* Flatten a array-object via recursive property
* #see {#link http://stackoverflow.com/questions/31829897/convert-recursive-array-object-to-flat-array-object}
* #param {Array} arr Array of objects with recursive props
* #param {String} recursiveProperty The string of the recursive property
* #return {Array} Flat array of all recursive properties without recursive property
*/
function arrExtract (arr, recursiveProperty) {
var extracted = []
function _arrExtract (children) {
_.each(children, function (item) {
if (item[recursiveProperty] && item[recursiveProperty].length) _arrExtract(item[recursiveProperty])
extracted.push(_.omit(item, recursiveProperty))
})
}
_arrExtract(arr)
return extracted
}
module.exports = arrExtract
Almost three years later and still looking for a one-size fits solution for this. Here it is, heavily influenced by #axelduch's answer.
const {isPlainObject, isArray, get, omit, reduce} = require('lodash')
const recursiveFlatten = (tree, headProp, parentIdProp, parentRefProp, parent = {}) => {
tree = isArray(tree) ? tree : [tree]
return reduce(tree, (acq, current) => {
const currentWithoutHead = omit(current, [headProp])
if (parentIdProp && parentRefProp) currentWithoutHead[parentRefProp] = parent[parentIdProp] || null
acq = [...acq, currentWithoutHead]
const next = get(current, headProp)
if (isPlainObject(next) || isArray(next)) {
parent = currentWithoutHead
acq = [...acq, ...recursiveFlatten(next, headProp, parentIdProp, parentRefProp, parent)]
}
return acq
}, [])
}
Here's a simple example:
const example = recursiveFlatten({
name: 'bill',
love: true,
lovers: [{
name: 'jil',
love: false,
lovers: [{
name: 'diana',
love: false,
lovers: false
}, {
name: 'einstein',
love: false,
lovers: {
name: 'carl sagan',
love: false,
lovers: false
}
}]
}]
}, 'lovers')
[ { name: 'bill', love: true },
{ name: 'jil', love: false },
{ name: 'diana', love: false },
{ name: 'einstein', love: false },
{ name: 'carl sagan', love: false } ]
Here's an example adding parentId prop via parentRef.
const example = recursiveFlatten({
name: 'bill',
love: true,
lovers: [{
name: 'jil',
love: false,
lovers: [{
name: 'diana',
love: false,
lovers: false
}, {
name: 'einstein',
love: false,
lovers: {
name: 'carl sagan',
love: false,
lovers: false
}
}]
}]
}, 'lovers', 'name', 'parentName')
[ { name: 'bill', love: true, parentName: null },
{ name: 'jil', love: false, parentName: 'bill' },
{ name: 'diana', love: false, parentName: 'jil' },
{ name: 'einstein', love: false, parentName: 'jil' },
{ name: 'carl sagan', love: false, parentName: 'einstein' } ]
Here's a fairly simple technique that will solve the problem as originally defined.
const recursiveFlatten = (tree) =>
tree .length == 0
? []
: tree .flatMap (({profiles = [], ... rest}) => [{... rest}, ... recursiveFlatten (profiles)])
const tree = [{name: "bill", car: "jaguar", age: 30, profiles: [{name: "stacey", car: "lambo", age: 23, profiles: [{name: "martin", car: "lexus", age: 34, profiles: []}]}]}, {name: "denise", car: "pinto", age: 28}]
console .log (
recursiveFlatten (tree)
)
This hard-codes the name "profiles" and removes it, keeping the rest of the properties intact in the copy generated.
Your own answer suggest substantially more complex requirements. This version handles these through several optional parameters, the way your answer does, although the way it's called changes here and could easily be altered if necessary:
const recursiveFlatten = (headProp, parentIdProp, parentRefProp, parent = {}) => (tree) =>
tree .length == 0
? []
: tree .flatMap (({[headProp]: children = [], ... rest}) => [
{
... rest,
... (parentIdProp && parentRefProp ? {[parentRefProp]: parent[parentIdProp] || null} : {})
},
... recursiveFlatten (headProp, parentIdProp, parentRefProp, rest) (children)
])
const tree = [{name: "bill", car: "jaguar", age: 30, profiles: [{name: "stacey", car: "lambo", age: 23, profiles: [{name: "martin", car: "lexus", age: 34, profiles: []}]}]}, {name: "denise", car: "pinto", age: 28}]
console .log (recursiveFlatten ('profiles') (tree))
console .log (recursiveFlatten ('profiles', 'name', 'parentName') (tree))
I wouldn't be thrilled about this API in my own code-base, though. The differing behaviors depending on how many parameters are passed adds unnecessary complexity. I would probably bury them under an API such as
const recursiveFlatten = (parentIdProp, parentRefProp) => (headProp) => (tree) => ...
Then we could create functions we need, such as using
const flattenProfiles = recursiveFlatten (null, null) ('profiles')
and
const flattenAndExpand = recuriveFlatten ('name', 'parentName') ('profiles')
to replace the two call inside the console .log () statements above.