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

3

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 Jan 2, 2017 at 8:55

answered Jan 2, 2017 at 8:52

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gzc Over a year ago

It should be ng-repeat="submenu in menu.menu"

Sajeetharan · Accepted Answer · 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>

Collectives™ on Stack Overflow

accessing nested menu items in the scope using json and angularJs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related