0

I have an array of objects which has ID, Name and Parent ID. I am basically trying to implement a hierarchy based on the parent ID in a selection box. My array of objects is like this

var data = [
{ID: 1, Name: "Category 1", ParentId: null},
{ID: 2, Name: "Category 2", ParentId: null},
{ID: 3, Name: "Sub Category 1", ParentId: 1},
{ID: 4, Name: "Sub Category 2", ParentId: 1},
{ID: 5, Name: "Sub Sub Category", ParentId: 3},
{ID: 6, Name: "Sub Sub Sub Category", ParentId: 5},
{ID: 7, Name: "Sub Sub Sub Sub Category", ParentId: 6}
];

I want the output to be in the order

Category 1
 - Sub Category 1
  -Sub Sub Category
   -Sub Sub Sub Category
    -Sub Sub Sub Sub Category
Category 2
 - Sub Category 2

Is there a way in which I can achieve this? Please help me. Thanks in advance.

Darshan
  • 53
  • 1
  • 3
  • 10
  • given your `data`, show us what you expect as `the output` – birdspider Jun 14 '17 at 18:30
  • This is going to be slow (n^2). Would have been faster if you had ["left" and "right" values](http://mikehillyer.com/articles/managing-hierarchical-data-in-mysql/). You'll have to recursively group the entries. – mpen Jun 14 '17 at 18:30
  • @Darshan I think birdspider wants you to show us what you expect the JSON output to look like. You've given us some text that is neither an in-memory representation nor an HTML representation. – mpen Jun 14 '17 at 18:33
  • @mpen could you please elaborate on the "left" and "right" values? I could probably make some changes if possible. – Darshan Jun 14 '17 at 18:34
  • @Darshan The article I linked explains it. However, if your dataset remains small, n^2 isn't going to kill you ;) – mpen Jun 14 '17 at 18:34
  • @mpen the array of objects is the data I'm getting from an API and that's in JSON output. I will make the hierarchical structure on a webpage. – Darshan Jun 14 '17 at 18:36
  • @Darshan You don't control the source? Then you can't store it efficiently, and the left/right stuff won't help you. Just recursively iterate through your data -- find all entries where ParentId is `null`, that's your top level, and then iterate the remaining entries, find ones where parentId is one of the entries you just found, and so forth. Repeat recursively. Try it out and then post your code when/if you get stuck. – mpen Jun 14 '17 at 19:11
  • @mpen Cool, I shall try this out, thanks a lot :D – Darshan Jun 14 '17 at 19:20
  • In what form do you want to get the output? Another array/object with sub-arrays/objects? Or HTML divs or tables or whatever? – myfunkyside Jun 14 '17 at 21:04
  • @myfunkyside I want the output in HTML divs – Darshan Jun 15 '17 at 05:45

1 Answers1

0

you can sort any array of objects in javascript given any parameter. Look at this answer from a previous question. In your particular case, it's the ParentId property that gives you the ascending order

climboid
  • 6,932
  • 14
  • 44
  • 71
  • Not exactly. sorting on parent Id would get you `Category 1, Category 2, Sub Category 1, Sub Category 2, ...etc.` Which is not the order the OP wants – mhodges Jun 14 '17 at 18:30
  • Yes, this just gives sorting, I require in a hierarchical way based on the parentID – Darshan Jun 14 '17 at 18:31