Dynamic MainMenu with unique subMenu's using ng-repeat with data from JSON

Question

I'm trying to ng-repeat and load the main menu from a JSON.

Here's the scenario. Please check the layout screenshot or you might not be able to understand

MainMenu - Groceries,Listing,Product,Blog,Gallery,Pages,Woman,Electronics,Contact

Submenu - Corporate,Electronics,Kids,Background Isotope,Login,Sign Up

JSON//

[{"title":"Corporative","link":"index_corporate.html"},
{"title":"Electronics","link":"index_corporate.html"},
{"title":"Kids","link":"index_corporate.html"},
{"title":"Background Isotope","link":"index_corporate.html"},
{"title":"Login","link":"#/login"},
{"title":"Sign Up","link":"#/register"}
]

Controller//

$http.get('data.json').success(function(dataForSubmenu){
            $scope.menu = dataForSubmenu;
        });

HTML//

<dt class="item">
    <ul class="sf-menu">
        <li><a href="index.html”>Groceries</a>//Titles to be repeated from JSON
            <ul>
                //Dropdown Menu Under Main Menu
                <li ng-repeat="menuData in menu"><a href="{{menuData.link}}">{{menuData.title}}</a></li>
            </ul>
        </li>
    </ul>
</dt>
<dd></dd>
<dt class="item">
    <ul class="sf-menu">
        <li><a href="page2.html”>Listing</a>//Titles to be repeated from JSON
            <ul>
                //Dropdown Menu Under Main Menu
                <li ng-repeat="menuData in menu"><a href="{{menuData.link}}">{{menuData.title}}</a></li>
            </ul>
        </li>
    </ul>
</dt>
<dd></dd>
<dt class="item">
    <ul class="sf-menu">
        <li><a href="page3.html”>Product</a>//Titles to be repeated from JSON
            <ul>
                //Dropdown Menu Under Main Menu
                <li ng-repeat="menuData in menu"><a href="{{menuData.link}}">{{menuData.title}}</a></li>
            </ul>
        </li>
    </ul>
</dt>

What I want to do is

Load the MainMenuItems using ng-repeat using data from JSON
Load DIFFERENT Sub Menus under multiple main menus using ng-repeat with data from JSON
Repeat should work with the HTML structure I have got going (Using a template for the website so can't change much in that)

I don't have a clue of how to do it :( Still a beginner at angular. Any help will be appreciated — Arjun Sunil, Mar 01 '16 at 16:30
create an account to jsfiddle: https://jsfiddle.net/ and create one with all your code. then paste the link in a comment so I can look and help. I cant really tell whats wrong with the code unless I can run it. What happens when you run it? — Costas Vrahimis, Mar 01 '16 at 16:35
The page seems to be to huge to make it work on jsfiddle. Even the parts which were working arent working on JSFiddle. Currently the submenu loading is working. But I dont know how to load the mainMenu and submenu from JSON. Thats where I am stuck. — Arjun Sunil, Mar 01 '16 at 17:41
I am a little confused from the picture it looks like it is working. what is "the submenu loading"? do you mean that the drop down menu shows but when you click the button nothing happens? if so try instead of — Costas Vrahimis, Mar 01 '16 at 19:04
Exactly! The dropdown menu is the submenu. and by submenu loading, I meant that it is working fine as I intend it to. i.e., loading the data from a json. — Arjun Sunil, Mar 02 '16 at 03:32
okay so what is it that you are trying to do that is not working? — Costas Vrahimis, Mar 02 '16 at 13:58
oh I think I see it now. I think I can help you but I would need access to the code. can you put it on github or email me cvrahimis.11@gmail.com? I will try and type an answer what I think would work in the mean time but because I do not have the code or the template I may be limited. — Costas Vrahimis, Mar 02 '16 at 18:18

score 1 · Answer 1 · edited May 23 '17 at 10:34

your json should be something like this:

 [{
 "menu":[{
     "mainMenuName": "Groceries",
     "mainMenuLink": "link"
     "subMenu": [{
         "title": "Corporative",
         "link": "index_corporate.html"
     }, {
         "title": "Electronics",
         "link": "index_corporate.html"
     }, {
         "title": "Kids",
         "link": "index_corporate.html"
     }, {
         "title": "Background Isotope",
         "link": "index_corporate.html"
     }, {
         "title": "Login",
         "link": "#/login"
     }, {
         "title": "Sign Up",
         "link": "#/register"
   }]
 }, {
     "mainMenuName": "Listing",
     "mainMenuLink": "link",
     "subMenu": [{
         "title": "Corporative",
         "link": "index_corporate.html"
     }, {
         "title": "Electronics",
         "link": "index_corporate.html"
     }, {
         "title": "Kids",
         "link": "index_corporate.html"
     }, {
         "title": "Background Isotope",
         "link": "index_corporate.html"
     }, {
         "title": "Login",
         "link": "#/login"
     }, {
         "title": "Sign Up",
         "link": "#/register"
     }]
 }, {
     "mainMenuName": "Product",
     "mainMenuLink": "link",
     "subMenu": [{
         "title": "Corporative",
         "link": "index_corporate.html"
     }, {
         "title": "Electronics",
         "link": "index_corporate.html"
     }, {
         "title": "Kids",
         "link": "index_corporate.html"
     }, {
         "title": "Background Isotope",
         "link": "index_corporate.html"
     }, {
         "title": "Login",
         "link": "#/login"
     }, {
         "title": "Sign Up",
         "link": "#/register"
     }]
 }]
}]

once you have that json in $scope.menu then your html should look like

 <dt ng-repeat="menuData in menu" class="item">
     <ul class="sf-menu">
         <li><a href="menuData.mainMenuLink”>{{menuData.mainMenuName}}</a>
             <ul>
                 //Dropdown Menu Under Main Menu
                 <li ng-repeat="subMenuData in menuData.subMenu"><a href="subMenuData.link">{{subMenuData.title}}</a></li>
             </ul>
         </li>
     </ul>
 </dt>

I have not tested this out yet but it should be something similar to this. if you send me the project I can take a look.

check this answer out its similar solution to what you want: https://stackoverflow.com/a/19840244/2502933

I'll try this out! I've also sent my repository to your email if you still want to try. Meanwhile, I'll try this code from my end. Thanks :) — Arjun Sunil, Mar 02 '16 at 18:59
I tried it but doesn't seem to work. If you get some time could you check my latest commit to git under the beta branch? Maybe I'm going wrong in calling the data, or maybe the menu isn't working; Any time you're free. I've kept the main menu work on pause temporarily, working on other parts of the project for now, although I need the menu to be loaded dynamically from JSON. Thank you in advance! — Arjun Sunil, Mar 07 '16 at 16:14

Dynamic MainMenu with unique subMenu's using ng-repeat with data from JSON

1 Answers1