sorting collection objects into directive by id with recursion - angularjs

Question

I've been checking some posts about recursive directives in here, but none of them seems to work for me.
Basically my case is the following:
Having a collection of objects as follows:
[
{id: 1, parentid:null, text: 'something 1'},
{id: 2, parentid:null, text: 'something 2'},
{id: 3, parentid:1, text: 'something 3'},
{id: 4, parentid:1, text: 'something 4'},
{id: 5, parentid:2, text: 'something 5'},
{id: 6, parentid:3, text: 'something 6'},
{id: 7, parentid:4, text: 'something 7'},
{id: 8, parentid:5, text: 'something 8'}
]
Of course there are more keys, but these are needed to place the logic.
Basically I something which renders the following:
<ul>
<li>Parent id: n
<ul>
<li>Children of n</il>
</li>
</ul>
So my first guess was that I need a directive which renders a similar version of itself each time there is a child occurence, but I'm sure even how to attack this. I just need a unknown number of heritance refers to the child of the upper level.
Any approach or pattern remendation to face this?

Answer 1

I think the easiest way is to first organise the data into hierarchical structure like this:
[
{
id: 1,
parentid:null,
text: 'something 1',
children: [
{id: 3, parentid:1, text: 'something 3'},
{id: 4, parentid:1, text: 'something 4'},
]
},
{
id: 2,
parentid:null,
text: 'something 2',
children: [
{id: 5, parentid:2, text: 'something 5'}
]
},
]
Then rendering with ng-repeat with nested ng-repeat is quite obvious.
If you have more levels in this hierarchy, then thinking about some kind of recursion may be a solution.
EDIT:
The simplest way is to reorganise data for rendering purposes in an object, where indexes (property names) are ids, and values are arrays with this node children. Then, to get children of each id you can get them by dictVar[parentId].
Data transformation is quite simple and can be done various ways, e.g.:
var dataDict = {};
angular.forEach(data, function (item) {
var id = item.parentid || 0;
var items = $scope.dataDict[id] || [];
items.push(item);
dataDict[id] = items;
});
After that in dataDict you have:
{
"0": [
{"id": 1, "parentid": null, "text": "something 1"},
{"id": 2, "parentid": null, "text": "something 2"}
],
"1": [
{"id": 3, "parentid": 1, "text": "something 3"},
{"id": 4, "parentid": 1, "text": "something 4"}
],
"2": [
{"id": 5, "parentid": 2, "text": "something 5"}
],
"3": [
{"id": 6, "parentid": 3, "text": "something 6"}
],
"4": [
{"id": 7, "parentid": 4, "text": "something 7"}
],
"5": [
{"id": 8, "parentid": 5, "text": "something 8"}
]
}
You can leave it like this or transform it even further to get fully hierarchical structure.
Then, to render the list you can use technique described here: http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/