I have the following markup:
<li data-group="bottoms">Pants</li>
<li data-group="bottoms">Pants</li>
<li data-group="bottoms">Pants</li>
<li data-group="tops">Shirt</li>
<li data-group="tops">T-shirt</li>
<li data-group="tops">Polo</li>
<li data-group="accessories">Sunglasses</li>
Im trying to return a list of the unique data-group
names, but I only wanna return it once. Which means from the list above I would like to return a variable that will contain:
My approach to this is to first find the length of the list and then make a for loop which loops over all the elements and prints their data-group
value. After that I would have to do some sorting so that the bottoms and tops dont show up 3 times, but only once.
I have tried to write the initial code which looks like this.
var uniqueCategoryGroupNames = document.querySelectorAll('li[data-group]');
for (var k = 0; k < uniqueCategoryGroupNames.length; k++) {
console.log([k]);
uniqueCategoryGroupNames[k].getAttribute('data-group');
}
You can use a combination of Array#from
, Array#reduce
and Array#includes
:
liArray.reduce( //Go through your Array
(acc, curr) =>
acc.includes(curr.getAttribute('data-group')) ? // Is the current value already stored?
acc // Then don't add the current value
: acc.concat([curr.getAttribute('data-group')]) // Else add the value
, [] // Starting value for the accumulator
);
Demo:
let liArray = Array.from(document.querySelectorAll('li[data-group]'));
let result = liArray.reduce((acc, curr) => acc.includes(curr.getAttribute('data-group')) ? acc : acc.concat([curr.getAttribute('data-group')]), []);
console.log(result);
<ul>
<li data-group="bottoms">Pants</li>
<li data-group="bottoms">Pants</li>
<li data-group="bottoms">Pants</li>
<li data-group="tops">Shirt</li>
<li data-group="tops">T-shirt</li>
<li data-group="tops">Polo</li>
<li data-group="accessories">Sunglasses</li>
</ul>
I am writing an Android app that requires access to a MySql server. Following examples I have found, I have a php page that sits on the server and does the MySql stuff, and I try to access that from ...
I am writing an Android app that requires access to a MySql server. Following examples I have found, I have a php page that sits on the server and does the MySql stuff, and I try to access that from ...
I have a map like this for example const Map = new Map().set('123', [ [ 'foo', 'bar' ] ]).set('456', [ [ 'baz', 'qux' ], [ 'quux', 'corge' ] ]); /* The structure of the Map looks like this: Map {...
I have a map like this for example const Map = new Map().set('123', [ [ 'foo', 'bar' ] ]).set('456', [ [ 'baz', 'qux' ], [ 'quux', 'corge' ] ]); /* The structure of the Map looks like this: Map {...
I have a navbar which needs to change colour on scroll. This functionality was originally built with js, however now it has a 'Login' button which is built in elm to perform other functionality. I ...
I have a navbar which needs to change colour on scroll. This functionality was originally built with js, however now it has a 'Login' button which is built in elm to perform other functionality. I ...
Prelog: I have implemented Google maps and Geolocation as a independent widgets, Now the user have the ability to add the widget as much as he wants in a page he is owns. I am using $.getScript(URl, ...
Prelog: I have implemented Google maps and Geolocation as a independent widgets, Now the user have the ability to add the widget as much as he wants in a page he is owns. I am using $.getScript(URl, ...