javascript - how to fetch json data in angularjs repeat directive? -
i want know that, how should fetch main menu json file in ng-repeat separately , sub menus separately.
below files
menu.json
{"data": { "main menu": { "menu1": [ {"id":1, "name":"level 2", "body":"this body."}, {"id":2, "name":"something new", "body":"this body new."} ], "menu2": [ {"id":1, "name":"cobat_something", "body":"this body of cobat."}, {"id":2, "name":"cobat_something new", "body":"this body of cobat new."} ] } } } here js file
app.js
(function(){ var app = angular.module('myapp', []); app.controller('maincontroller', ['$http', function($http){ var mainctrl = this; $http.get('menu.json').success(function(data){ mainctrl.menus = data; }); }]); })(); and html file
index.html
<body ng-controller="maincontroller mainctrl"> <ul> <li ng-repeat="menu in mainctrl.menus"> {{menu}} <ul> <li ng-repeat="submenu in mainctrl.menus"> {{submenu.main menu}} </li> </ul> </li> </ul> </body>
try below list menu names.
<body ng-app="myapp" ng-controller="maincontroller mainctrl"> <ul> <li ng-repeat="menus in mainctrl.menus"> <ul> <li ng-repeat="menu in menus"> {{menu.name}} </li> </ul> </li> </ul> </body> angular code:
(function() { var app = angular.module('myapp', []); app.controller('maincontroller', ['$http', function($http) { var mainctrl = this; $http.get('menu.json').success(function(response) { mainctrl.menus = response.data["main menu"]; }); }]); })(); 
Comments
Post a Comment