1

I have a JSON array containing objects that are not structured hierarchically, but have have one-to-many relationships, similar to example below:

[
        {"id": 1, "parentId": 5},
        {"id": 2, "parentId": 1},
        {"id": 3, "parentId": 1},
        {"id": 4, "parentId": 3},
        {"id": 5, "parentId": 3},
        {"id": 6, "parentId": 2},
        {"id": 7, "parentId": 4},
        {"id": 8, "parentId": 2}
]

I'd like to use AngularJS to show this data in a html table in a way that shows hierarchy of objects, beginning from selected one. If we wanted to show hierarchy for object with "id": 1, then it should produce view similar to this (up to bottom): 

{"id": 1}
{"id": 2}             {"id": 3}
{"id": 6} {"id": 8}   {"id": 4} {"id": 5}
                      {"id": 7}

I've built an Angular service to give me all child objects of the selected ID, but I don't know how can I loop (recursively?) through this array to produce the desired effect.

I thought it could be done with recursive templates, but all of the examples I've found are based on data/json already structured hierarchically. I've also tried to nest ng-repeat directives but then I would have to nest as many ng-repeats as many levels there would be. I also thought about transforming the whole array to another that would have relationships built-in, but that doesn't seem very efficient.

In vanilla javascript I would make a function that would recursively search for every child of object and if found, simply append it to the DOM.

What is "angular way" of achieving this? I really have no clue where to go next.

EDIT: I should've explicitly state, that IDs of elements are looped, so there should be condition set to stop when selected ID is found again. In example above that would be empty field under element with ID 5, even though {"id": 1, "parentId": 5}

Ketus
  • 123
  • 1
  • 11
  • Could [this](http://stackoverflow.com/a/31554379/1011591) perhaps be what you're looking for? – gh0st Apr 15 '16 at 15:50
  • Or maybe a recursive directive like [this](http://stackoverflow.com/questions/14430655/recursion-in-angular-directives)? – Hugo Wood Apr 15 '16 at 16:03
  • Unfortunately, you have loops, so this _isn't_ a hierarchy. I wrote out a solution to organize your array into something that you can recurse through with a directive (the one Hugo Wood mentioned, actually), then noticed, and it's not possible with a structure that has loops. If that was simply an oversight when you were typing up your example, and your actual values won't have that, I'll post what I had. – Harris Apr 15 '16 at 16:10
  • @HarrisWeinstein I was just looking at what Hugo Wood posted. The loops are not an oversight. When constructing hierarchy view, loop should stop when object that already exists is found. I know, that adds complexity :/ – Ketus Apr 15 '16 at 16:21
  • I am not able figure out what output you want please help to understand the problem. – Devank Apr 15 '16 at 16:44
  • @Devank I'd like to display a tree, where whole row below element of ID 1 there are other elements that have field "parentId": 1, and then the same action for them. – Ketus Apr 15 '16 at 16:48
  • 1
    One of your `id`s should have a null `parentId`. Otherwise you put yourself in an infinite loop. Unless it's a typo. – gh0st Apr 15 '16 at 16:48
  • @ketus Can you give full example of tree with id=1 – Devank Apr 15 '16 at 16:51
  • 1
    @Devank I've edited the question, added one more element to better represent the problem. Now, there is full tree for element with ID 1. Circular ID's are intentional, and once the selected ID repeated, the whole loop should stop, that's why it's not seen under element with ID 5 – Ketus Apr 15 '16 at 16:59
  • @gh0st unfortunately I can't change it, i should code the condition to stop when repeated ID is found. – Ketus Apr 15 '16 at 17:00
  • @ketus, I am still confused. In my knowledge if I choose id = 1 then the hierarchy should be 1 > 5 > 3 Thats all – Devank Apr 15 '16 at 17:15
  • @Devank It's the other way around. Under ID 1, there are ID 2 and ID 3, because they have "parentId": 1 – Ketus Apr 15 '16 at 17:18
  • Got it now let me try it out – Devank Apr 15 '16 at 17:20
  • So the output for id = 1 will be ?? Give the required json object – Devank Apr 15 '16 at 17:22
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/109275/discussion-between-devank-and-ketus). – Devank Apr 15 '16 at 17:26
  • Possible duplicate of [Easier way to convert JSON to CSV?](http://stackoverflow.com/questions/40350659/easier-way-to-convert-json-to-csv) – Paul Sweatte Jan 31 '17 at 01:16

0 Answers0