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
      }
   ]
}

Show source
| javascript   | html   | css   | angularjs   | json   2017-01-02 09:01 2 Answers

Answers to accessing nested menu items in the scope using json and angularJs ( 2 )

  1. 2017-01-02 09:01

    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>
    
  2. 2017-01-02 09:01

    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="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
      <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
      <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
    
      <script data-require="jquery@1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <script data-require="angular.js@1.4.7" 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>

Leave a reply to - accessing nested menu items in the scope using json and angularJs

◀ Go back