If I were to present an array like the one below:
[
{
'id':48,
'parent':0,
'order':1
},
{
'id':49,
'parent':48,
'order':2
},
{
'id':50,
'parent':0,
'order':3
},
{
'id':51,
'parent':48,
'order':4
},
{
'id':52,
'parent':0,
'order':5
},
{
'id':53,
'parent':50,
'order':6
},
{
'id':54,
'parent':50,
'order':7
}
]
I am seeking a solution that involves writing Javascript code in either an Angular controller or utilizing ng-repeat within the view to generate the following output:
[
{
'id':48,
'parent':0,
'order':1,
'children':[
{
'id':49,
'parent':48,
'order':2
},
{
'id':51,
'parent':48,
'order':4
}
]
},
{
'id':50,
'parent':0,
'order':3,
'children':[
{
'id':53,
'parent':50,
'order':6
},
{
'id':54,
'parent':50,
'order':7
}
]
},
{
'id':52,
'parent':0,
'order':5
},
]
The initial array is expected to be sorted by order already, and it's necessary for the output to uphold this ordering.
The current approach I have taken does function as intended. It consists of using ng-repeat along with a conditional statement to verify if the given object has a parent.
In essence, my strategy involves using ng-repeat to display all parents first, followed by iterating through the entire array repeatedly for each parent to identify children. However, this method incurs significant performance costs and becomes sluggish when dealing with arrays containing over 40-50 objects. Additionally, as the depth increases, so do the performance issues. Although I aim to accommodate up to five levels of nesting, my existing looping mechanism falls short.
My goal is to optimize this process within the controller to minimize the workload for ng-repeat.
Did anyone take the time to review my current solution? Since there are implications of receiving assistance effortlessly *eyeroll*
<div class="comments">
<span></span>
<ul>
<li class="comment byuser comment-author-solopine bypostauthor even thread-even depth-1" id="comment-21">
<span></span>
<div class="thecomment">
<span></span>
<div class="author-img">
<span><img alt="" class="avatar avatar-60 photo" height="60" src="{{%20comment.author_avatar_urls['96']%20}}" width="60"></span>
</div><span></span>
<div class="comment-text">
<span><span class="reply"><a class="comment-reply-link scroll" href="" rel="nofollow">Reply</a></span></span>
<h6 class="author">{{ comment.author_name }}</h6><span class="date">{{ comment.date | date : 'longDate' }}</span>
<p></p>
<div></div>
<p></p>
</div>
</div>
</li>
<li style="list-style: none">
<span></span>
<ul class="children">
<li class="comment byuser comment-author-solopine bypostauthor odd alt depth-2" id="comment-24">
<span></span>
<div class="thecomment">
<span></span>
<div class="author-img">
<span><img alt="" class="avatar avatar-60 photo" height="60" src="{{%20childComment.author_avatar_urls['96']%20}}" width="60"></span>
</div><span></span>
<div class="comment-text">
<span><span class="reply"><a class="comment-reply-link" href="" rel="nofollow">Reply</a></span></span>
<h6 class="author">{{ childComment.author_name }}</h6><span class="date">{{ childComment.date | date : 'longDate' }}</span>
<p></p>
<div></div>
<p></p>
</div>
</div>
</li><!-- #comment-## -->
</ul><!-- .children -->
<!-- #comment-## -->
</li>
</ul>
</div>
As previously mentioned, leveraging ng-repeat.