How to sort an array by element nesting?

Question

I have an array of data, I need to make sure that the elements are sorted by nesting (parent, child) and follow each other in alphabetical order both at the top level and at the nested one.

Initial data:

const arr = [
  {
    id: 0,
    name: 'A',
    parentId: null,
  },
  {
    id: 78,
    name: 'B',
    parentId: 77,
  },
  {
    id: 1715,
    name: 'C',
    parentId: 78,
  },
  {
    id: 77,
    name: 'D',
    parentId: null,
  },
  {
    id: 1716,
    name: 'E',
    parentId: 1715,
  },
  {
    id: 76,
    name: 'F',
    parentId: null,
  },
];

My approach doesn't work because it doesn't take into account additional nesting of elements.

function sortData() {
  const result = [];

  arr.sort((a, b) => {
    return a.name.localeCompare(b.name);
  });

  for (const element of arr) {
    if (!element.parentId) {
      const children = folders.filter((el) => el.parentId === element.id);

      result.push(element, ...children);
    }
  }

  return result;
}

What data do I need to get:

const arr = [
  {
    id: 0,
    name: 'A',
    parentId: null,
  },
  {
    id: 77,
    name: 'D',
    parentId: null,
  },
  {
    id: 78,
    name: 'B',
    parentId: 77,
  },
  {
    id: 1715,
    name: 'C',
    parentId: 78,
  },
  {
    id: 1716,
    name: 'E',
    parentId: 1715,
  },
  {
    id: 76,
    name: 'F',
    parentId: null,
  },
];

What data do I get using my approach:

const arr = [
  {
    id: 0,
    name: 'A',
    parentId: null,
  },
  {
    id: 77,
    name: 'D',
    parentId: null,
  },
  {
    id: 78,
    name: 'B',
    parentId: 77,
  },
  {
    id: 76,
    name: 'F',
    parentId: null,
  }
];

How many levels of nesting the original data can have? – Gerardo Furtado Aug 11 '22 at 11:16 — Gerardo Furtado, Aug 11 '22 at 11:16
Great set. There are no restrictions. – Vladislav Aug 11 '22 at 11:17 — Vladislav, Aug 11 '22 at 11:17

João Pedro · Answer 1 · 2022-08-11T11:38:08.100

0

just use a simple sort function

const arr = [
  {
    id: 0,
    name: "A",
    parentId: null
  },
  {
    id: 78,
    name: "B",
    parentId: 77
  },
  {
    id: 1715,
    name: "C",
    parentId: 78
  },
  {
    id: 77,
    name: "D",
    parentId: null
  },
  {
    id: 1716,
    name: "E",
    parentId: 1715
  },
  {
    id: 76,
    name: "F",
    parentId: null
  }
];

arr.sort(function (a, b) {
if(b.parentId == a.id) return b;
  return a.id - b.id;
});

console.log('arr',arr)

edited Aug 11 '22 at 11:38

answered Aug 11 '22 at 11:01

João Pedro

794
2
12
28

This won't work for me. Look at the item "What data do I need to get", please. Additionally, I need to sort the data by nesting (parent, child) – Vladislav Aug 11 '22 at 11:05
it looks exactly like the array you posted under "What data do I need to get" – João Pedro Aug 11 '22 at 11:10
There's no nesting in the array you posted by the way – João Pedro Aug 11 '22 at 11:11
Please take a closer look at the order of the elements. I need to make sure that the parent element comes first, then the child, and so on. How to expand an element and its children into an array and additionally sort it all by name. – Vladislav Aug 11 '22 at 11:13
There are elements that are related to other elements by parentId. – Vladislav Aug 11 '22 at 11:14
Gotcha. Why don't you add a children property to your objects? – João Pedro Aug 11 '22 at 11:14
You can add the children array to it – João Pedro Aug 11 '22 at 11:16
But at the output I need to get a one-dimensional array – Vladislav Aug 11 '22 at 11:16
I edited the function, but the parentId:null will show up first – João Pedro Aug 11 '22 at 11:24
This option is not suitable for solving the problem. For example, B refers to D, so B must come after the element D, not before it. – Vladislav Aug 11 '22 at 11:29
Look at my version that I described above, please, I want to make it so that the parent element comes first, and after not its children. – Vladislav Aug 11 '22 at 11:31
Thanks for your diligence and your help, but this won't solve my problem. Look at the item "What data do I need to get", please. – Vladislav Aug 11 '22 at 12:01

score 0 · Answer 2 · answered Aug 11 '22 at 11:03

It works on my side using a simple sort function

const arr = [
  {
    id: 0,
    name: 'A',
    parentId: null,
  },
  {
    id: 78,
    name: 'B',
    parentId: 77,
  },
  {
    id: 1715,
    name: 'C',
    parentId: 78,
  },
  {
    id: 77,
    name: 'D',
    parentId: null,
  },
  {
    id: 1716,
    name: 'E',
    parentId: 1715,
  },
  {
    id: 76,
    name: 'F',
    parentId: null,
  },
];

let result = []

const sortData = () => {
  arr.sort((a, b) => {
    return a.name.localeCompare(b.name);
  });
  return arr;
}

console.log(sortData())

This won't work for me. Look at the item "What data do I need to get", please. Additionally, I need to sort the data by nesting (parent, child) — Vladislav, Aug 11 '22 at 11:05

How to sort an array by element nesting?

2 Answers2