将对象数组转换为按值分组的数组数组

Question

In the fabric.js app I have elements that are divided into several groups.
The user can form an arbitrary number of groups containing an arbitrary number of elements.
The attached image shows the elements grouped into three groups, and each element shows its ID.

When the user has finished creating groups, the app measures the distance between the elements and puts the elements in a "parent - child(ren)" relation.
This results in an array of objects:

var elements = [
    { "parent": 1, "children": [ 2 ] },
    { "parent": 2, "children": [ 1 ] },
    { "parent": 3, "children": [ 7 ] },
    { "parent": 4, "children": [ 5, 6 ] },
    { "parent": 5, "children": [ 4, 6, 7 ] },
    { "parent": 6, "children": [ 4, 5 ] },
    { "parent": 7, "children": [ 3, 5 ] },
    { "parent": 8, "children": [ 9 ] },
    { "parent": 9, "children": [ 8, 11 ] },
    { "parent": 10, "children": [ 11, 12 ] },
    { "parent": 11, "children": [ 9, 10 ] },
    { "parent": 12, "children": [ 10 ] }
];

Each element in a group is parent to the elements that are close to it, but at the same time it is also a child of the element closest to it.
How, in this example, to get an array with three subarrays from the "elements" array?
Each resulting subarray should contain ID's of elements that are only in that group.
The final result should be:

var groups = [
    [1, 2],
    [3, 4, 5, 6, 7],
    [8, 9, 10, 11, 12]
];

Answer 1

1) Build sets by going over elements. For each element, check if parent is in any existing set. If no set available then create the set. Add the children to the set.
2) Now, we have array of sets and might have intersecting sets, which need to merge.
3) convert the array of sets into array of arrays.

PS: I think step 2 of merge can be combined in step 1 itself.

 var elements = [ { parent: 1, children: [2] }, { parent: 2, children: [1] }, { parent: 3, children: [7] }, { parent: 4, children: [5, 6] }, { parent: 5, children: [4, 6, 7] }, { parent: 6, children: [4, 5] }, { parent: 7, children: [3, 5] }, { parent: 8, children: [9] }, { parent: 9, children: [8, 11] }, { parent: 10, children: [11, 12] }, { parent: 11, children: [9, 10] }, { parent: 12, children: [10] } ]; const arrSets = []; elements.forEach(({ parent, children }) => { let set = arrSets.find(set => set.has(parent)); if (!set) { set = new Set(); set.add(parent); arrSets.push(set); } children.forEach(x => set.add(x)); }); const resSets = []; arrSets.forEach(set => { let curr = resSets.find(dat => [...set].some(x => dat.has(x))); if (!curr) { curr = new Set(); resSets.push(curr); } [...set].forEach(x => curr.add(x)); }); const arr = resSets.map(set => [...set]); console.log(arr);

Answer 2

Here's another way to solve the problem using a stack.

• Start with a parent, traverse through it's children and their children until the stack is empty. This is one group.
• Maintain a visited array to avoid loops
• Push a group to the main array if it's not empty

 function findGrops(elements) { const eleMap = {}; // build a parent => children map elements.forEach( e => { eleMap[e.parent] = e.children; }); const groups = []; const visited = {}; // iterate in a depth first way // parent -> children -> their children until empty Object.keys(eleMap).forEach( k => { let grp = []; let stk = [k]; //parseInt(k,10) to avoid the quotes while( stk.length > 0) { let x = stk.pop(); if (!(x in visited)) { grp.push(x); visited[x] = true; // add children to the stack stk = stk.concat(eleMap[x]); } } // push to groups array grp.length && groups.push(grp); }); return groups; } const input = [ { "parent": 1, "children": [ 2 ] }, { "parent": 2, "children": [ 1 ] }, { "parent": 3, "children": [ 7 ] }, { "parent": 4, "children": [ 5, 6 ] }, { "parent": 5, "children": [ 4, 6, 7 ] }, { "parent": 6, "children": [ 4, 5 ] }, { "parent": 7, "children": [ 3, 5 ] }, { "parent": 8, "children": [ 9 ] }, { "parent": 9, "children": [ 8, 11 ] }, { "parent": 10, "children": [ 11, 12 ] }, { "parent": 11, "children": [ 9, 10 ] }, { "parent": 12, "children": [ 10 ] } ]; console.log('result:', findGrops(input));