title: How do i loop an array inside a class - Angular 2
body: <p>I'd like to loop an array called data, inside another array filled with 'champions' what is the correct syntax for this? i can happily loop all of the champions inside of my IChampion, but i can't seem to loop the IChampionData[]</p>
  
  <p>IChampion.ts</p>
  
  <pre><code>import { IChampionData } from "./champion-data";
  
  export interface IChampion {
     type: string;
     format: string;
     version: string;
     data: IChampionData[];
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class='table-responsive'&gt;
  &lt;table class='table table-striped'&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Champion Name&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr *ngFor="let champion of champion"&gt;
              &lt;td&gt;{{champion1.name}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>The data is what i want to loop, i have a variable inside IChampionData called name and i'm not sure how to get the variable.</p>
  
  <p>Here's an example of the JSON</p>
  
  <pre><code>  "data": {
          "Aatrox": {
              "version": "6.24.1",
              "id": "Aatrox",
              "key": "266",
              "name": "Aatrox",
              "title": "the Darkin Blade",
              "blurb": "Aatrox is a legendary warrior, one of only five that remain of an ancient race known as the Darkin. He wields his massive blade with grace and poise, slicing through legions in a style that is hypnotic to behold. With each foe felled, Aatrox's ...",
              "info": {
                  "attack": 8,
                  "defense": 4,
                  "magic": 3,
                  "difficulty": 4
              },
              "image": {
                  "full": "Aatrox.png",
                  "sprite": "champion0.png",
                  "group": "champion",
                  "x": 0,
                  "y": 0,
                  "w": 48,
                  "h": 48
              },
              "tags": [
                  "Fighter",
                  "Tank"
              ],
              "partype": "BloodWell",
              "stats": {
                  "hp": 537.8,
                  "hpperlevel": 85.0,
                  "mp": 105.6,
                  "mpperlevel": 45.0,
                  "movespeed": 345.0,
                  "armor": 24.384,
                  "armorperlevel": 3.8,
                  "spellblock": 32.1,
                  "spellblockperlevel": 1.25,
                  "attackrange": 150.0,
                  "hpregen": 6.59,
                  "hpregenperlevel": 0.5,
                  "mpregen": 0.0,
                  "mpregenperlevel": 0.0,
                  "crit": 0.0,
                  "critperlevel": 0.0,
                  "attackdamage": 60.376,
                  "attackdamageperlevel": 3.2,
                  "attackspeedoffset": -0.04,
                  "attackspeedperlevel": 3.0
              }
          }
  </code></pre>
  
  <p>and here is my attempt at the Model</p>
  
  <pre><code>import { IChampionStats } from './champion-stats';
  import { IChampionImage } from './champion-image';
  import { IChampionInfo } from './champion-info';
  
  export interface IChampionData {
     version: string;
     id: string;
     key: string;
     name: string;
     title: string;
     blurb: string;
     info: IChampionInfo[];
     image: IChampionImage[];
     tags: string[];
     partype: string;
     stats: IChampionStats[];
   }
  </code></pre>