Sort array based off parent ID - arrays

Question

I have an array that contains an ID and also a parent_ID. I need to figure out a way to list all objects in the array that share the same parent. The data that generates this array is dynamic and can go up multiple levels deep in some instances.
example array
0: {id: "1", parent_id: "0", name: "Greater New York"...}
1: {id: "2", parent_id: "0", name: "Eastern New York"...}
2: {id: "1001", parent_id: "2", name: "Suffolk"...}
3: {id: "1002", parent_id: "2", name: "Nassau"...}
4: {id: "1003", parent_id: "1", name: "Eastern Long Island"...}
5: {id: "1005", parent_id: "1", name: "Bronx"...}
6: {id: "1006", parent_id: "1", name: "Brooklyn"...}
7: {id: "1007", parent_id: "1", name: "Kings Bay"...}
8: {id: "1008", parent_id: "1", name: "Manhattan"...}
9: {id: "1009", parent_id: "1046", name: "Mid-Hudson"...}
10: {id: "1014", parent_id: "1", name: "Westchester"...}
11: {id: "1015", parent_id: "2", name: "Metro"...}
12: {id: "1016", parent_id: "2", name: "Queens"...}
13: {id: "1017", parent_id: "2", name: "Western Queens"...}
14: {id: "1045", parent_id: "1", name: "Lower Hudson"...}
15: {id: "1046", parent_id: "0", name: "North Hudson"...}
16: {id: "1047", parent_id: "1046", name: "Albany"...}
17: {id: "1048", parent_id: "1046", name: "Berkshire County"...}
18: {id: "1049", parent_id: "1046", name: "Mohawk River"...}
19: {id: "1050", parent_id: "1046", name: "Southern Adirondack"...}
20: {id: "1051", parent_id: "1046", name: "Green Mountain"...}
Right now i have my JSX returning checkboxes in the order that is put out from the array.
{areas.map(area => (
<div className="col-12 mb-2" key={area.id}>
<input data-layout={area.type} type="checkbox" value={area.id}
onChange={props.onChange}/>
<label className="ml-3 mb-0">{area.name}</label>
</div>
))}
what i need to do is match the the parent_id to the id and group them all together,
so all with parent_id: 0 will be top level, then everything will fall under that.
Greater New York
Eastern Long Island
Bronx
Brooklyn
Kings Bay
Manhattan
Westchester
Lower Hudson
Eastern New York
Suffolk
Nassau
Metro
Queens
Western Queens
North Hudson
Mid Hudson
Albany
Berkshire County
Mohawk River
Southern Adarondack
Green Mountain
Any help formulating this logic would be greatly appreciated.
Edit: All i can find to filter is
{areas.filter(area => area.id ===
area.parent_id).map(filteredArea => (
<li>{filteredArea}</li>
))}
I've played with multiple variations of this, including making a separate array for the parent ID's.

Answer 1

If you are trying to group objects by parent_id, below code will be able to help.
let groupBy = (array, key) => {
return array.reduce((result, obj) => {
(result[obj[key]] = result[obj[key]] || []).push(obj);
return result;
}, {});
};
groupBy(data,'parent_id');
Output :
{
'0': [
{ id: '1', parent_id: '0', name: 'Greater New York' },
{ id: '2', parent_id: '0', name: 'Eastern New York' },
{ id: '1046', parent_id: '0', name: 'North Hudson' }
],
'1': [
{ id: '1003', parent_id: '1', name: 'Eastern Long Island' },
{ id: '1005', parent_id: '1', name: 'Bronx' },
{ id: '1006', parent_id: '1', name: 'Brooklyn' },
{ id: '1007', parent_id: '1', name: 'Kings Bay' },
{ id: '1008', parent_id: '1', name: 'Manhattan' },
{ id: '1014', parent_id: '1', name: 'Westchester' },
{ id: '1045', parent_id: '1', name: 'Lower Hudson' }
],
'2': [
{ id: '1001', parent_id: '2', name: 'Suffolk' },
{ id: '1002', parent_id: '2', name: 'Nassau' },
{ id: '1015', parent_id: '2', name: 'Metro' },
{ id: '1016', parent_id: '2', name: 'Queens' },
{ id: '1017', parent_id: '2', name: 'Western Queens' }
],
'1046': [
{ id: '1009', parent_id: '1046', name: 'Mid-Hudson' },
{ id: '1047', parent_id: '1046', name: 'Albany' },
{ id: '1048', parent_id: '1046', name: 'Berkshire County' },
{ id: '1049', parent_id: '1046', name: 'Mohawk River' },
{ id: '1050', parent_id: '1046', name: 'Southern Adirondack' },
{ id: '1051', parent_id: '1046', name: 'Green Mountain' }
]
}
You can then use this list to generate your <li> elements