accessing nested menu items in the scope using json and angularJs

Question

I am quite new to angular and cannot find a solution to access the submenu items in my angular app. I can access the top level menu items but am lost as to how to get the second level items

below is my code so far

html

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-app="list">  
  <div ng-controller="ListCtrl">
    <ul>
        <li ng-repeat="menu in menus" id="{{artist.id}}">
            <a ng-href="{{menu.content}}">{{menu.description}}</a>
            <ul>
                <li ng-href="{{menu.content}}">{{menu.menu}}</li>
            </ul>
        </li>
    </ul>
  </div>
</html>

javascript

// Code goes here
angular.module('list', []);

function ListCtrl($scope, $http) {
  $http({
    method: 'GET',
    url: 'menu.json'
  }).success(function(data) {
    $scope.menus = data.menus; // response data
    angular.forEach(data.menus, function(menu, index) {

    });
  });
}

json

{
   "menus":[
      {
         "id":"contact",
         "leaf":true,
         "description":"Contact Us",
         "link":"",
         "content":"contactUs.html",
         "cssClass":"static-content",
         "menu":null
      },
      {
         "id":"rules",
         "leaf":false,
         "description":"Sports Betting Rules",
         "link":"",
         "content":"",
         "cssClass":"",
         "menu":[
            {
               "id":"types",
               "leaf":true,
               "description":"Wager Types",
               "link":"",
               "content":"wagerTypes.html",
               "cssClass":"static-content wager-types",
               "menu":null
            },
            {
               "id":"odds",
               "leaf":true,
               "description":"Odds & Lines",
               "link":"",
               "content":"oddsAndLines.html",
               "cssClass":"static-content",
               "menu":null
            },
            {
               "id":"policies",
               "leaf":true,
               "description":"Rules & Policies",
               "link":"",
               "content":"rulesAndPolicies.html",
               "cssClass":"static-content rules-policies",
               "menu":null
            },
            {
               "id":"bonuses",
               "leaf":true,
               "description":"Sports Bonuses",
               "link":"",
               "content":"sportsBonuses.html",
               "cssClass":"static-content",
               "menu":null
            }
         ]
      },
      {
         "id":"conditions",
         "leaf":false,
         "description":"Terms & Conditions",
         "link":"",
         "content":"",
         "cssClass":"",
         "menu":[
            {
               "id":"termsOfService",
               "leaf":true,
               "description":"Terms of Service",
               "link":"",
               "content":"termsOfService.html",
               "cssClass":"static-content",
               "menu":null
            },
            {
               "id":"privacy",
               "leaf":true,
               "description":"Privacy Policy",
               "link":"",
               "content":"privacy.html",
               "cssClass":"static-content",
               "menu":null
            }
         ]
      },
      {
         "id":"view",
         "leaf":true,
         "description":"View in: Mobile | Full Site",
         "link":"",
         "content":"view.html",
         "cssClass":"static-content",
         "menu":null
      }
   ]
}

sachila ranawaka · Accepted Answer · 2017-01-02 08:55:50Z

up vote 3 down vote accepted

add another ng-repeat

 <!DOCTYPE html>
    <html>
    <head>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
      <script src="app.js"></script>
    </head>
    <body ng-app="list">  
      <div ng-controller="ListCtrl">
        <ul>
            <li ng-repeat="menu in menus" id="{{artist.id}}">
                <a ng-href="{{menu.content}}">{{menu.description}}</a>
                <ul>
                    <li ng-href="{{submenu.content}}" ng-repeat="submenu in menu.menu">{{submenu.id}}</li>
                </ul>
            </li>
        </ul>
      </div>
    </html>

edited 4 hours ago

answered 4 hours ago

sachila ranawaka

63912

It should be ng-repeat="submenu in menu.menu" – gzc 4 hours ago

opps yep your right. just update it – sachila ranawaka 4 hours ago

add a comment |

Sajeetharan · Answer 2 · 2017-01-02 08:58:05Z

To access child items, you can have as,

<ul>
      <li ng-repeat="menu in menus" id="{{artist.id}}">
        <a ng-href="{{menu.content}}">{{menu.description}}</a>
        <ul>
          <li ng-repeat="submenu in menu.menu">
            <a ng-href="{{menu.content}}">{{submenu.description}}</a>
        </ul>
      </li>
</ul>

DEMO

var app = angular.module("app", []);

app.controller("ListCtrl", ["$scope",
  function($scope) {

    $scope.menus =  
      [{
        "id": "contact",
        "leaf": true,
        "description": "Contact Us",
        "link": "",
        "content": "contactUs.html",
        "cssClass": "static-content",
        "menu": null
      }, {
        "id": "rules",
        "leaf": false,
        "description": "Sports Betting Rules",
        "link": "",
        "content": "",
        "cssClass": "",
        "menu": [{
          "id": "types",
          "leaf": true,
          "description": "Wager Types",
          "link": "",
          "content": "wagerTypes.html",
          "cssClass": "static-content wager-types",
          "menu": null
        }, {
          "id": "odds",
          "leaf": true,
          "description": "Odds & Lines",
          "link": "",
          "content": "oddsAndLines.html",
          "cssClass": "static-content",
          "menu": null
        }, {
          "id": "policies",
          "leaf": true,
          "description": "Rules & Policies",
          "link": "",
          "content": "rulesAndPolicies.html",
          "cssClass": "static-content rules-policies",
          "menu": null
        }, {
          "id": "bonuses",
          "leaf": true,
          "description": "Sports Bonuses",
          "link": "",
          "content": "sportsBonuses.html",
          "cssClass": "static-content",
          "menu": null
        }]
      }, {
        "id": "conditions",
        "leaf": false,
        "description": "Terms & Conditions",
        "link": "",
        "content": "",
        "cssClass": "",
        "menu": [{
          "id": "termsOfService",
          "leaf": true,
          "description": "Terms of Service",
          "link": "",
          "content": "termsOfService.html",
          "cssClass": "static-content",
          "menu": null
        }, {
          "id": "privacy",
          "leaf": true,
          "description": "Privacy Policy",
          "link": "",
          "content": "privacy.html",
          "cssClass": "static-content",
          "menu": null
        }]
      }, {
        "id": "view",
        "leaf": true,
        "description": "View in: Mobile | Full Site",
        "link": "",
        "content": "view.html",
        "cssClass": "static-content",
        "menu": null
      }]
     ; // response data


  }
]);

<!DOCTYPE html>
<html>

<head>
  <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
  <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

  <script data-require="[email protected]" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script data-require="[email protected]" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script data-require="[email protected]" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>

  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app='app'>
  <div ng-controller="ListCtrl">
    <ul>
      <li ng-repeat="menu in menus" id="{{artist.id}}">
        <a ng-href="{{menu.content}}">{{menu.description}}</a>
        <ul>
          <li ng-repeat="submenu in menu.menu">
            <a ng-href="{{menu.content}}">{{submenu.description}}</a>
        </ul>
        </li>
    </ul>
  </div>


</body>

</html>

asked	today
viewed	44 times
active	today

current community

your communities

more stack exchange communities

accessing nested menu items in the scope using json and angularJs

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript html css angularjs json or ask your own question.

Hot Network Questions

current community

your communities

more stack exchange communities

accessing nested menu items in the scope using json and angularJs

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript html css angularjs json or ask your own question.

Related

Hot Network Questions