Create menu from a JSON file using AngularJS

Question

I have this JSON file:

"[{\"Menu\":\"General/Register/User\"},
{\"Menu\":\"App/MultiExport/Parameter\"},
{\"Menu\":\"App/MultiExport/CreateFile\"},
{\"Menu\":\"App/MultiCube/Create\"}]"

I have to receive it in my HTML side and transform it in a Boostrap NAV (ul, li and stuff), using Angular JS.

Note that each "/" is a different level of menu, example:

.General .Register .User .App .MultiExport .Parameter .Create File .MultiCube .Create

How can I create it using Angular?

Thanks in advance!

Answer 1

First, create a service that fetches the JSON and transforms it into an hierarchical structure, eg :

[ { "name": "General",
    "subitems": [ { "name": "Register",
                    "actions": [ "User" ] 
                  }
                ]
  },
  { "name": "App",
    "subitems": [ { "name": "MultiExport",
                    "actions": [ "Parameter", "CreateFile" ] 
                  },
                  { "name": "MultiCube",
                    "actions": [ "Create" ]
                  }
                ]
  }
}

Second, create a template with a controller that uses the service and render it via other visual directives, like ngRepeat, eg :

<div ng-repeat="menu in menus">
  {{menu.name}}
  <div ng-repeat="item in menu.subitems">
    {{item.name}}
    <div ng-repeat="action in item.actions">
      {{action}}
    </div>
  </div>
</div>

Third, create a directive that uses the template and controller, and use this directive in your page, eg .

angular.module('foo', []).directive('foo', function() {
  return {
    templateUrl: 'foo.template.html',
    controller: 'FooController'
  };
});