I need to iterate dynamic multiple nested level object show in html using angularjs

Question

I have one dynamic complex Object i need to get all keys in nested ul li format using angularjs Object like this

[{"key":"campaign_1","values":[{"key":"Furniture","values":[{"key":"Gene Hale","values":[{}],"rowLevel":2},{"key":"Ruben Ausman","values":[{}],"rowLevel":2}],"rowLevel":1},{"key":"Office Supplies","values":[{"key":"Andrew Allen","values":[{}],"rowLevel":2},{"key":"Claire Gute","values":[{}],"rowLevel":2},{"key":"Ken Black","values":[{}],"rowLevel":2},{"key":"Sandra Flanagan","values":[{}],"rowLevel":2}],"rowLevel":1},{"key":"Technology","values":[{"key":"Kaushik Reddy","values":[{}],"rowLevel":2}],"rowLevel":1},{"key":"SubTotal","values":[{"key":"","values":[{"key":"","values":[{"Temp_ID":11}]}]}]}],"rowLevel":0},{"key":"campaign_2","values":[{"key":"Furniture","values":[{"key":"Bhanu Praksh","values":[{}],"rowLevel":2},{"key":"Emily Burns","values":[{}],"rowLevel":2},{"key":"Eric Hoffmann","values":[{}],"rowLevel":2},{"key":"Lena Hernandez","values":[{}],"rowLevel":2},{"key":"Pete Kriz","values":[{}],"rowLevel":2},{"key":"Ranjana Ram","values":[{}],"rowLevel":2},{"key":"Sean Odonnell","values":[{}],"rowLevel":2}],"rowLevel":1},{"key":"Technology","values":[{"key":"Erin Smith","values":[{}],"rowLevel":2},{"key":"Steve Nguyen","values":[{}],"rowLevel":2}],"rowLevel":1},{"key":"SubTotal","values":[{"key":"","values":[{"key":"","values":[{"Temp_ID":11}]}]}]}],"rowLevel":0},{"key":"campaign_3","values":[{"key":"Office Supplies","values":[{"key":"Linda Cazamias","values":[{}],"rowLevel":2},{"key":"Matt Abelman","values":[{}],"rowLevel":2},{"key":"Odella Nelson","values":[{}],"rowLevel":2}],"rowLevel":1},{"key":"Technology","values":[{"key":"Alejandro Grove","values":[{}],"rowLevel":2},{"key":"Brosina Hoffman","values":[{}],"rowLevel":2},{"key":"Irene Maddox","values":[{}],"rowLevel":2},{"key":"Manju Nath","values":[{}],"rowLevel":2},{"key":"Sindhu Lohith","values":[{}],"rowLevel":2},{"key":"Tracy Blumstein","values":[{}],"rowLevel":2}],"rowLevel":1},{"key":"SubTotal","values":[{"key":"","values":[{"key":"","values":[{"Temp_ID":11}]}]}]}],"rowLevel":0}]

i am using ng-repeat for that but it's not working for nested level below is the link of jsfiddle which i have tried https://jsfiddle.net/gtxrkmoz/1/

You may get some idea and i am not familiar with angularjs. please have a look ar this. http://blog.sodhanalibrary.com/2015/07/filter-json-in-hierarchical-way-using.html#.W1gX_tIzbIU — htoniv, Jul 25 '18 at 06:27
Ran it through a validator, it is actually valid JSON, FYI. In case you didn't realize, JSON == **J**ava**S**cript **O**bject **N**otation. — Drew Reese, Jul 25 '18 at 06:35
check this https://stackoverflow.com/questions/14430655/recursion-in-angular-directives — Hikmat G., Jul 25 '18 at 07:20

score 0 · Answer 1 · 2018-07-25T06:42:46.217

0

I extended your example on jsfiddle and it works. Try this:

<ul ng-repeat="data in obj_data">
    {{data.key}}
    <li ng-if="data.values.length > 0" ng-repeat="d in data.values" >
        {{d.key}}
        <p ng-if="d.values.length > 0" ng-repeat="x in d.values" >
               {{x.key}}
        </p>
    </li>
</ul>

edited Jul 25 '18 at 06:42

answered Jul 25 '18 at 06:27

Here you go. Your code works. You just have to step down the ladder and watch out which type of HTML element you use next. – Jul 25 '18 at 06:28
You are doing for 3 level statically, but i need it dynamically according to number of level's – Rahul Sharma Jul 25 '18 at 06:30
Try it with an additional `ng-if`. I reworked the code. Please try. – Jul 25 '18 at 06:37
No it's not working can you please share jsfidle link – Rahul Sharma Jul 25 '18 at 06:39
This is not what he is asking for. you done it for 3 levels what if it supposed to be like 10 levels. we don't write 10 times ng-repeat. he needs to create it dynamically. – htoniv Jul 25 '18 at 06:40
@Rahul Sharma: I corrected my code. There was a typo in it. For the 3 levels you can use my example. If it gets trickier/deeper, you have to rethink your initial approach, though. – Jul 25 '18 at 06:51

I need to iterate dynamic multiple nested level object show in html using angularjs

1 Answers1