Skip to content

Instantly share code, notes, and snippets.

@derpixler
Last active June 25, 2021 12:59
Show Gist options
  • Save derpixler/9b2ddd0968b443c02f49cc064b702b8e to your computer and use it in GitHub Desktop.
Save derpixler/9b2ddd0968b443c02f49cc064b702b8e to your computer and use it in GitHub Desktop.
//--- Preparation ----
let wrapperNode = document.createElement('div');
let posibleGroupeKeys = ['fooo','barrrr','foo','bar'];
for (let i = 0; i < 129; i++) {
let childNode = document.createElement('span');
childNode.dataset.collectionGroup = posibleGroupeKeys[Math.floor(Math.random(0,posibleGroupeKeys.length)*posibleGroupeKeys.length)];
wrapperNode.append(childNode);
}
let collections = wrapperNode.querySelectorAll('[data-collection-group]');
// ---- Block 1. ----
let groups = {};
collections.forEach((collection, index) => {
let groupKey = collection.dataset.collectionGroup;
if(!groups.hasOwnProperty(groupKey)){
groups[groupKey] = [];
}
groups[groupKey].push(collection);
});
console.log(groups);
// ---- Block 2. ----
let collectionsArray = Array.from(collections);
let setOfGroupKeys = new Set(collectionsArray.map(element => element.getAttribute('data-collection-group')));
let groups = {};
setOfGroupKeys.forEach((groupKey) => {
groups[groupKey] = collectionsArray.filter(elem => elem.dataset.collectionGroup === groupKey);
});
console.log(groups);
// ---- Block 3. ----
let groups = {};
collections.forEach((collection, index) => {
let groupKey = collection.dataset.collectionGroup;
if(groupKey && !(groupKey in groups)){
groups[groupKey] = document.querySelectorAll('[data-accordion="true"][data-accordion-group="' + groupKey +'"]');
}
});
console.log(groups);
// --- Block 4. ----
let groups = {};
groups = Array.from(collections).reduce((groups, node) => {
let key = node.dataset.collectionGroup;
if (!groups[key]) {
groups[key] = [];
}
groups[key].push(node);
return groups;
}, {});
console.log(groups);
// --- Block 5. ----
let groups = {};
const collectionsLength = collections.length;
for (let i = 0; i < collectionsLength; i++) {
let collection = collections[i];
let groupKey = collection.dataset.collectionGroup;
if(!groups.hasOwnProperty(groupKey)){
groups[groupKey] = [];
}
groups[groupKey].push(collection);
}
console.log(groups);
// --- Block 6. ----
let groups = {};
const collectionsLength = collections.length;
for (const collection of collections) {
let groupKey = collection.dataset.collectionGroup;
if(!groups.hasOwnProperty(groupKey)){
groups[groupKey] = [];
}
groups[groupKey].push(collection);
}
console.log(groups);
/*
--- Result ----
{foo: Array(30), bar: Array(35), fooo: Array(30), barrrr: Array(34)}
bar: (35) [span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span]
barrrr: (34) [span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span]
foo: (30) [span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span]
fooo: (30) [span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span, span]
__proto__: Object
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment