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
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.
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/
Related
I want to include an atomic pattern and want to pass data from a JSON array below is code and JSON file.
anchor-link.mustache
{{ label }}
footer-nav.mustache
<ul class="menu vertical">
{{# footerNav }}
<li>{{> atoms-anchor-link(url:url, label : label, class : class) }}</li>
{{/ footerNav }}
</ul>
JSON from where i want to populate anchor mustache
{
"footerNav": [{
"label": "Shop",
"url": "#",
"class": "body-copy"
}, {
"label": "Pods",
"url": "#",
"class": "all-caps-large"
}]
}
Output
<ul class="menu vertical">
<li>
</li>
<li>
</li>
</ul>
Pattern Lab is generating correct HTML and creates anchors but no values are populating in anchors.
Thanks in advance!!!!
You have called wrong pattern here.
<li>{{> atoms-anchor-link(url:url, label : label, class : class) }}</li>
Correct pattern is.
<li>{{> atoms-anchor-link}}</li>
This will work.
Trying to execute the following code, using AngularJS.
So far I got this:
<ul>
<li ng-repeat='(key,value) in dset'><span>{{key}}</span>
<li ng-repeat="n in value"> {{ n }}</li> //DOES NOT WORK
</li>
</ul>
dSet: { "something" : [ "abc, "def" ], "something2": ["abc","blah"] }
Basically I have a Map> and want to print this as in:
String1
listValue1
listValue2
listValue3
...
String2
listValue1
listValue2
Please let me know if you have any thoughts on how to get this to work.
Suppose your dset is...
$scope.dset = {a: [1,2,3], b: [4,5,6]};
If you want your list-items to be nested, use:
<ul>
<li ng-repeat="(key, val) in dset"><span>{{key}}</span>
<ul><li ng-repeat="v in val">{{v}}</li></ul>
</li>
</ul>
If you want your list-items not to be nested, use ng-repeat-start and ng-repeat-end:
<ul>
<li ng-repeat-start="(key, val) in dset"><span>{{key}}</span>
<li ng-repeat="v in val" ng-repeat-end>{{v}}</li>
</ul>
Suppose I have the following JSON structure in my javascript as a variable named myTree:
[
{"name": "A", "children": [
{"name": "C", "children": []},
{"name": "D", "children": []},
]
},
{"name": "B", "children": []}
]
I would like to use AngularJS to render it as the following HTML. How can I do it?
FYI, the tree can have arbitrary depth. I have shown only a very simple example here.
<ul>
<li>
A
<ul>
<li>C</li>
<li>D</li>
</ul>
</li>
<li>B</li>
</ul>
You should make recursive templates:
<script type="text/ng-template" id="item_template">
{{child.name}}
<ul>
<li ng-repeat="child in child.children" ng-include="'item_template'">
</li>
</ul>
</script>
<ul>
<li ng-repeat="child in myTree" ng-include="'item_template'">
</li>
</ul>
So, you will render 'infinite' levels of recursion, no only the first level.
I'm trying to apply the below model to a handlebar template to get a simple list , but I guess
either the data hierarchy or the way I'm trying to loop through the data
model may be incorrect.
data.js
{
"categories":[
{
"games":{
"action":{
"game":{
"name":"Game 1",
"Description":"Description 1"
},
"game":{
"name":"Game 2",
"Description":"Description 2"
}
}
}
},
{
"movies":{
"fantasy":{
"movie":{
"name":"Movie 1",
"Description":"Description 1"
},
"movie":{
"name":"Movie 2",
"Description":"Description 2"
}
}
}
}
]
}
template
<ul id="categories">
<li> Games
<ul class="subcategories">
{{#each categories}}
...........
{{/each}}
</ul>
</li>
</ul>
I'd like to get a simple list (see below)
<ul id="categories">
<li> Games
<ul class="subcategories">
<li> Action
<ul>
<li>Game 1</li>
<li>Game 2</li>
</ul>
</li>
</ul>
</li>
<li> Movies
<ul class="subcategories">
<li> Fantasy
<ul>
<li>Movie 1</li>
<li>Movie 2</li>
</ul>
</li>
</ul>
</li>
</ul>
Any help is greatly appreciated.
Your data structure doesn't really represents your expected output.
The structure should be something like this:
data (object)
categories (array)
category (object)
category name
subcategories (array)
subcategory (object)
subcategory name
items (array)
item (object)
item name
item description
Note: I called the innermost array items instead of games/movies/etc, so it's easier to use it in the template.
You can see my implementation in this jsfiddle.
I have following (json) object:
[
{
name: "Foo",
children: [{
name: "bar",
children:[{
...
}]
}]
}
]
There can be any number of children/objects in any level. Now I want to get following HTML Code:
<ul>
<li>Foo</li>
<li>
<ul>
<li>Bar</li>
</ul>
</li>
<ul>
But of course there could be 10 or more levels with 20 or more children per level.
Is there any way to do that? Thank you very much!
this should work, just replace json array with your data
<script type="text/ng-template" id="nodes_renderer.html">
{{node.name}}
<ul ng-model="node.children" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.children" ng-include="'nodes_renderer.html'">
</li>
</ul>
</script>
<div data-drag-enabled="false">
<ul>
<li ng-repeat="node in #*JSON ARRAY*#" ng-include="'nodes_renderer.html'">
</li>
</ul>
</div>