Loop through an array from JSON using Angular JS

Question

I am trying to loop through an array from JSON and display the contents more like a side menu. I wrote something like

<ul ng-repeat="(key, value) in menuList.Menu"> <li>{{key}}</li> <ul ng-repeat="(key, value) in value"> <li> {{key}}</li> //second key <ul ng-repeat="(key, value) in value"> <li> {{key}}</li> <ul ng-repeat="(key, value) in value"> <li> {{key}} : {{value}}</li> </ul> </ul> </ul> </ul>

The problem is my second key has both object and array. How do I display the value of Object and loop/ng-repeat just through the array. I cannot modify it with this as it will display the entire content of the array.

 <li> {{key}} : {{value}}</li> 

A part of my JSON for better understanding is given below:

{ "class": 99, "mode" : 0, "Menu": [{ "MenuNum": 1, "MenuItems": [{ "ItemNum": 0, "ItemDesc": "Main Menu", "ActionCode": "-", "ActionInst": "" } , { "ItemNum": 1, "ItemDesc": "BBQ", "ActionCode": "M", "ActionInst": "0992" }, { "ItemNum": 2, "ItemDesc": "Beverages", "ActionCode": "M", "ActionInst": "0992" }] },{ "MenuNum": 2, "MenuItems": [{ "ItemNum": 0, "ItemDesc": "Sub Menu", "ActionCode": "-", "ActionInst": "" }, { "ItemNum": 1, "ItemDesc": "BBQTYPE1", "ActionCode": "P", "ActionInst": "0996" }, { "ItemNum": 2, "ItemDesc": "BeveragesTYPE1", "ActionCode": "P", "ActionInst": "0998" }] }] }

I want the sidebar more like

Answer 1

Presuming at the moment that you just want the ng-repeat logic, this may be what you are looking for:

 <ul ng-repeat="topMenu in menuList.Menu"> <li> {{$index}} <ul> <li> MenuNum: {{topMenu.MenuNum}} </li> <li> MenuItems <ul ng-repeat="submenu1 in topMenu.MenuItems"> <li> {{$index}} <ul> <li>ItemNum: {{submenu1.ItemNum}}</li> <li>ItemDesc: {{submenu1.ItemDesc}}</li> <li>ActionCode: {{submenu1.ActionCode}}</li> <li>ActionInst: {{submenu1.ActionInst}}</li> </ul> </li> </ul> </li> </ul> </li> </ul> 

If you then want a relatively easy way to do the menu opening/closing, you would probably want to put all this into an Angular accordion. I can probably help you with that if you want.

Answer 2

It looks like you're trying to create a list with nested children. How about a recursive pattern which uses ng-include recursively to display all the nested children? Something like this:

<script type="text/ng-template" id="menuTree"> {{ menuItem.name }} <ul ng-if="menuItem.children"> <li ng-repeat="menuItem in menuItem.children" ng-include="'menuTree'"></li> </ul> </script> <ul> <li ng-repeat="menuItem in menuItems" ng-include="'menuTree'"></li> </ul> 

I'm using a slightly different data structure to your code, but you should get the idea. Here's a demo: http://jsfiddle.net/mmmxh8kq/

EDIT:

If the data is as simple as the JSON you posted and you don't need a recursive menu, you could just try this:

<ul> <li ng-repeat="menus in menuList.Menu"> {{ menus.MenuNum }} <ul> <li ng-repeat="menuItems in menus.MenuItems"> {{ menuItems.ItemDesc }} </li> </ul> </li> </ul> 

Demo: http://jsfiddle.net/n4mo80od/