Javascript: Hierarchical object sorting

Question

I have an array of objects and every objects has the fields id, parentId and position. The position field stores the relative position of that item, so if I make a sort function like this:

object.sort((a, b) => {
  if(a.position < b. position) return -1;
  if(a.position > b. position) return 1;
  return 0;
})

It ends up like this:

{id: 1, parentId: null, position: 0}
{id: 3, parentId: null, position: 1}
{id: 5, parentId: 1, position: 1}
{id: 6, parentId: 3, position: 1}
{id: 4, parentId: null, position: 2}
{id: 2, parentId: 1, position: 2}

How to check both parentId and position to end up like this?

{id: 1, parentId: null, position: 0}
{id: 5, parentId: 1, position: 1}
{id: 2, parentId: 1, position: 2}
{id: 3, parentId: null, position: 1}
{id: 6, parentId: 3, position: 1}
{id: 4, parentId: null, position: 2}

What is the logic behind expecting {id: 3, parentId: null, position: 1} at index 3? — Nitheesh
– Nitheesh, Commented Mar 15, 2022 at 10:46
"Is there a way..." - Yes. Define the logic, reproduce it with JS -> What have you tried so far to solve this on your own? — Andreas
– Andreas, Commented Mar 15, 2022 at 10:52
@Nitheesh parent id: 1, then all "children" of id: 1 (by position), next parent (id: 3), children of that parent, ... — Andreas
– Andreas, Commented Mar 15, 2022 at 10:53

Nina Scholz · Accepted Answer · 2022-03-15 11:47:08Z

1

You could collect all nodes by their parentId and get the ordered result starting with null and by the ordered arrays.

const
    getNodes = parent => (parents[parent] || [])
        .sort((a, b) => a.position - b.position)
        .flatMap(o => [o, ...getNodes(o.id)]),
    data = [{ id: 1, parentId: null, position: 0 }, { id: 2, parentId: 1, position: 2 }, { id: 3, parentId: null, position: 1 }, { id: 6, parentId: 3, position: 1 }, { id: 4, parentId: null, position: 2 }, { id: 5, parentId: 1, position: 1 }],
    parents = data.reduce((r, o) => ((r[o.parentId] ??= []).push(o), r), {}),
    result = getNodes(null);

console.log(result);
console.log(parents);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Mar 15, 2022 at 11:47

answered Mar 15, 2022 at 10:56

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Collectives™ on Stack Overflow

Javascript: Hierarchical object sorting

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related