Iterating over array/JSON in Typescript to build Angular 2 template menu with submenus

Question

update: Plunker session added on request. https://plnkr.co/edit/0XjAoxzjIoSUelFcfmrx (no experience so will likely need help getting it to run on Plunker)

Building up a menu system using Node, Angular 2 and Typescript. Creating the output with manually added content works just fine, but having trouble wanting to mod this to iterate over a more complex array to create menu and sub-menu items. I see examples of for(var a in array) and for(var a of array), but perplexed as to which is the best way to go. Here is the current setup:

my menu.component.ts:

import {Component} from 'angular2/core';

export class MenuContent {
  constructor (
    public id: number,
    public name: string
  ) { }
}

@Component({
  selector: 'jimmmenu',
  templateUrl: 'app/menu.html'
})

export class MenuComponent {
  menuTitle = 'Menu!';

  menuContent = [
    new MenuContent(1, 'menu item'),
    new MenuContent(2, 'menu item'),
    new MenuContent(3, 'menu item'),
    new MenuContent(4, 'menu item')
  ]

  Menu = this.menuContent[0];

}

the menu.html template:

<div>
    <h2>{{menuTitle}}</h2>
    <ul>
        <li *ngFor="#menu of menuContent">{{menu.name}} {{menu.id}}</li>
    </ul>
</div>

and the index.ejs snippet where the menu is placed:

<body>
    <jimmmenu></jimmmenu>
    <jsTurfApp>Loading...</jsTurfApp>
    <script src='/socket.io/socket.io.js'></script>
</body>

As I said, everything works fine like this, producing a simple list of menu items. But when I try to do something like:

menuData = {
    "menu": [
      { "id": 0, "name": "DasnBoard", "image":"/Images/dashboard_on.gif", "link": "page0.html", 
        "subMenu": [
          { "id": 10, "name": "Main", "image": null, "link": "page1.html", "subMenu": null },
          { "id": 11, "name": "ET & Moisture", "image": null, "link": "page2.html", "subMenu": null }
        ]
      },
    ]
  };

for(var m in menuData) {
    menuContent = [ new MenuContent(this.menuData.menu[m].id, this.menuData.menu[m].name); ]
  }

...things start going awry, such as the Chrome Inspector crying 'Uncaught SyntaxError: Unexpected token ;' on the line with the for(). And yes I know that the loop would only add the last one... it's a bad example, for sure.

Essentially I'm trying to do the following, but looping through the menuData array instead of populating menuContent by hand with long drawn-out menu/submenu assignments:

menuContent = [
  new MenuContent(this.menuData.menu[0].id, this.menuData.menu[0].name),
  new MenuContent(this.menuData.menu[0].subMenu[0].id, this.menuData.menu[0].subMenu[0].name),
...
]

Admittedly my Typescript and Angular 2 knowledge is small and the available google-results seems sparse on similar ideas, which is why I turn to you all for assistance or prodding in the right direction. Appreciate any insights.

Please create a Plunker that allows to reproduce the problem plnkr.co/edit/dbb6gn?p=info — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 14, 2016 at 13:17
I have no experience on how to do that, but will give it a try once I get home this evening. Thanks for the idea! — the digitalmouse
– the digitalmouse, Commented Apr 14, 2016 at 13:19
It's not difficult. Add a comment if you're stuck. I prefer template: instead of templateUrl in Plunkers because otherwise it's difficult to study the code. — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 14, 2016 at 13:20
Gotcha.. Started adding stuff but on the commute home at the moment... better to do this stuff once I reach a real computer. :) plnkr.co/edit/0XjAoxzjIoSUelFcfmrx — the digitalmouse
– the digitalmouse, Commented Apr 14, 2016 at 13:34
Plunker updated (see link above or in main question text. No clue what I am doing with it.. doesn't appear to output anything. :/ — the digitalmouse
– the digitalmouse, Commented Apr 14, 2016 at 20:01

kemsky · Accepted Answer · 2016-04-14 20:09:47Z

1

You could use this approach for simplicity:

<ul class="menu">
<li *ngFor="#item of items">
    <a>{{item.name}}</a>
    <ul class="sub-menu">
        <li *ngFor="#subitem of item.subMenu">
            <label>{{subitem.name}}</label>
        </li>
    </ul>
</li>
</ul>

answered Apr 14, 2016 at 20:09

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

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

4 Comments

the digitalmouse Over a year ago

ah... and in my case 'items' is the menuData array above?

kemsky Over a year ago

yep, menuData.menu, it should be array of menu items.

the digitalmouse Over a year ago

will give that a try first thing in the morning and report back.

the digitalmouse Over a year ago

well i'll be darned... that worked perfectly and doesn't clutter the code in the Component. Now I can work out a conditional *ngIF to detect any 3rd level submenus, and I'll be golden. Thanks @kemsky and Günter for your help!

Collectives™ on Stack Overflow

Iterating over array/JSON in Typescript to build Angular 2 template menu with submenus

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related