title: Iterating over array/JSON in Typescript to build Angular 2 template menu with submenus
body: <p><strong><em>update:</strong>  Plunker session added on request.  <a href="https://plnkr.co/edit/0XjAoxzjIoSUelFcfmrx" rel="nofollow">https://plnkr.co/edit/0XjAoxzjIoSUelFcfmrx</a></em>  <em>(no experience so will likely need help getting it to run on Plunker)</em></p>
  
  <p>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 <code>for(var a in array)</code> and <code>for(var a of array)</code>, but perplexed as to which is the best way to go.  Here is the current setup:</p>
  
  <p>my menu.component.ts:</p>
  
  <pre><code>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];
  
  }
  </code></pre>
  
  <p>the menu.html template:</p>
  
  <pre><code>&lt;div&gt;
      &lt;h2&gt;{{menuTitle}}&lt;/h2&gt;
      &lt;ul&gt;
          &lt;li *ngFor="#menu of menuContent"&gt;{{menu.name}} {{menu.id}}&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the index.ejs snippet where the menu is placed:</p>
  
  <pre><code>&lt;body&gt;
      &lt;jimmmenu&gt;&lt;/jimmmenu&gt;
      &lt;jsTurfApp&gt;Loading...&lt;/jsTurfApp&gt;
      &lt;script src='/socket.io/socket.io.js'&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>As I said, everything works fine like this, producing a simple list of menu items.  But when I try to do something like:</p>
  
  <pre><code>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 &amp; 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); ]
    }
  </code></pre>
  
  <p>...things start going awry, such as the Chrome Inspector crying '<code>Uncaught SyntaxError: Unexpected token ;</code>' on the line with the <code>for()</code>.  <em>And yes I know that the loop would only add the last one... it's a bad example, for sure.</em></p>
  
  <p>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:</p>
  
  <pre><code>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),
  ...
  ]
  </code></pre>
  
  <p>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.</p>