title: Get method to Object in Object Angular 2
body: <p>I have Data Model project in Angular 2. I have only three classes.</p>
  
  <pre><code>class Menu {
    name: string;
    categories: { [name: string]: Category };
  }
  
  class Category {
    name: string;
    dishes: { [name: string]: Dish };
  }
  
  class Dish {
    name: string;
  }
  </code></pre>
  
  <p>In every class I have two methods created.</p>
  
  <p><code>getName(){ return this.name }</code> // in all classes</p>
  
  <p>and</p>
  
  <p><code>getCategory() { return this.categories }</code> // in case of Menu class</p>
  
  <p><code>getDishes() { return this.dishes }</code> // in case of Category class</p>
  
  <p>In my home.ts Component, I have the Data request (http request) from the backend, and I put all the data in those classes. This is working OK.</p>
  
  <pre><code>  getMenus() {
      this.globals.getMenus().subscribe(
        data =&gt; {
          this.menus = {};
          Object.keys(data).forEach(name =&gt; {
            this.menus[name] = new Menu(data[name]);
          });
  
          console.log(this.menus);
        },
        err =&gt; { console.log(err) }
      );
    }
  </code></pre>
  
  <p>console.log(this.menus) is working OK and prints all the data model correctly.</p>
  
  <p>Now, my question is:</p>
  
  <p>How can I use the get methods to make a list in my home.html with all the data, like:</p>
  
  <blockquote>
    <ul>
    <li>Menu 1</li>
    <li>"name of menu"</li>
    <li>Category 1  </li>
    <li><p>"name of category"</p>
    
    <ul>
    <li>Dish 1
    
    <ul>
    <li>"name of dish 1"</li>
    </ul></li>
    </ul></li>
    <li>Category 2</li>
    <li><p>"name of category 2"</p>
    
    <ul>
    <li>Dish 1
    
    <ul>
    <li>"name of dish 1" </li>
    </ul></li>
    </ul></li>
    <li><p>Menu 2</p></li>
    <li>"name of menu 2
    
    <ul>
    <li>Category 1</li>
    <li>... etc</li>
    </ul></li>
    </ul>
  </blockquote>
  
  <p>That's the Json Server Response:</p>
  
  <pre class="lang-js prettyprint-override"><code>{
    "menu_1": {
      "name": "Menú de día",
      "cat_1": {
        "name": "Entrantes",
        "dish_1": {
          "Name": "Ensalada Romana"
        },
        "dish_2": {
          "Name": "Sopa de galets"
        }
      },
      "cat_2": {
        "name": "Segundos",
        "dish_1": {
          "Name": "Calamares a la romana"
        },
        "dish_2": {
          "Name": "Tortilla de patatas"
        }
      }
    },
    "menu_2": {
      "name": "Menú Principal",
      "cat_1": {
        "name": "Primer Plato",
        "dish_1": {
          "Name": "Ensalada Romana"
        },
        "dish_2": {
          "Name": "Sopa de galets"
        }
      },
      "cat_2": {
        "name": "Segundo Plato",
        "dish_1": {
          "Name": "Calamares a la romana"
        },
        "dish_2": {
          "Name": "Tortilla de patatas"
        }
      },
      "cat_3": {
        "name": "Postres",
        "dish_1": {
          "Name": "Crema Catalana"
        }
      }
    }
  }
  </code></pre>
  
  <p>Thanks in advance.</p>