Merging unknown number of arrays without duplicates

Question

Can't understand how to loop through all arrays and push it into one avoiding duplicates, so I can have the result like:

['All', 'Images', 'Video']

So far, now I have the following, but it is not that expected:

let filterize = function(el, config){
	let target =  document.getElementById(el);
	let arrayCommon;
	for(let value in config) {		
		arrayCommon = [...new Set([...config[value].filter])];
	} 
	
	console.log(arrayCommon) 
	
	
}

var filterize_init = new filterize('Filtered', {
	element_1: {
		filter: ['All', 'Image']
	},
	element_2: {
		filter: ['All', 'Video']
	}
})

<div class="wrapper">
	<div id="Filtered" class="filter-content">
		
	</div>
</div>

Can anyone help ?

Possible duplicate of How to merge two arrays in Javascript and de-duplicate items — George
– George, Commented Apr 24, 2017 at 8:06
Yeah, I read that topic... but there was known number of arrays. Thats the problem for me now. Cant understand how to loop through all (unknown number) arrays, which can be added by user: it may be two or much more. — NeedH8
– NeedH8, Commented Apr 24, 2017 at 8:09
The line in your loop is overwriting the previous arrayCommon, not adding to it. — nnnnnn
– nnnnnn, Commented Apr 24, 2017 at 8:10
Maybe you want an empty Set created before the loop, add to the set inside the loop, then convert set to array after the loop. Either that or just .concat() the individual arrays to form a master list with duplicates, then remove the duplicates from the full list. — nnnnnn
– nnnnnn, Commented Apr 24, 2017 at 8:12

nnnnnn · Accepted Answer · 2017-04-24 08:23:56Z

2

If you could convert your config to be an array of arrays then you could call .concat() with that to combine them into a single array with duplicates. Then use a Set to remove the duplicates after that:

let filterize = function(el, config){
    let working = Object.keys(config).map(e => config[e].filter);
    let arrayCommon = [...new Set([].concat(...working))];

    console.log(arrayCommon);	
}

var filterize_init = new filterize('Filtered', {
	element_1: {
		filter: ['All', 'Image']
	},
	element_2: {
		filter: ['All', 'Video']
	},
	element_3: {
		filter: ['All', 'Whatever', 'Video', 'Image', 'Test']
	}
})

edited Apr 24, 2017 at 8:23

answered Apr 24, 2017 at 8:19

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nnnnnn Over a year ago

@georg - Oh, of course. Answer updated. Thanks. (I'm still used to posting answers that don't use the new operators so that the code'll work in IE, but of course the other parts of the code already used ..., so...)

NeedH8 Over a year ago

Yeah, thanks! Me too trying to get used to this features )

Collectives™ on Stack Overflow

Merging unknown number of arrays without duplicates

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related