title: Trying to show images and counting the teachers from each group
body: <p>In my spare time i'd like to code for fun and helping others. I am new to ionic and angular. I do not use a database just a json object where I get my information from.</p>
  
  <p>So basically I want a page with a ionic card with the studens and the teachers. Like this: <a href="https://gyazo.com/61933179c66a1bb815e461f1a158a92c" rel="nofollow noreferrer">https://gyazo.com/61933179c66a1bb815e461f1a158a92c</a> <br>
  This is what I have: <a href="https://gyazo.com/62123a96be5a2370f4b1300437cff974" rel="nofollow noreferrer">https://gyazo.com/62123a96be5a2370f4b1300437cff974</a></p>
  
  <p>With my method it counts every person in the groep. But I want to count per rank.</p>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;ion-header&gt;
  
      &lt;ion-navbar color ="primary"&gt;
          &lt;button ion-button menuToggle&gt;
            &lt;ion-icon name="menu"&gt;&lt;/ion-icon&gt;
          &lt;/button&gt;
          &lt;ion-title&gt;Amcik&lt;/ion-title&gt;
        &lt;/ion-navbar&gt;
      &lt;/ion-header&gt;
  
      &lt;ion-content&gt;
        &lt;ion-searchbar&gt;
      &lt;/ion-searchbar&gt;
        &lt;ion-grid&gt;
          &lt;ion-row&gt;
            &lt;ion-col col-12 col-md *ngFor="let item of items"&gt;
              &lt;ion-card class="groep"&gt;
                &lt;ion-item&gt;
                  &lt;h2&gt;{{ item.name }}&lt;/h2&gt;
                  &lt;/ion-item&gt;
                  &lt;div class="foto"*ngFor="let i of item.items"&gt;
                      &lt;img class="pic" src={{i.avatar}}&gt;
                  &lt;/div&gt;
                  &lt;p&gt;{{ item.count }} leerlingen&lt;/p&gt;
              &lt;/ion-card&gt;
            &lt;/ion-col&gt;
          &lt;/ion-row&gt;
      &lt;/ion-grid&gt;
      &lt;/ion-content&gt;
  </code></pre>
  
  <h1>TS PAGE</h1>
  
  <pre><code> import { Component } from '@angular/core';
  
  import { NavController, NavParams } from 'ionic-angular';
  
  @Component({
    selector: 'page-page2',
    templateUrl: 'page2.html'
  })
  
  export class Page2 {
  items:any;
  
      constructor(private navCtrl: NavController) {
  
        this.items = [
        {voornaam: 'Mert', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 1', rank: 'teacher'},
        {voornaam: 'Ask Sana', achternaam: 'Benzer', avatar: 'http://placehold.it/100', groep: 'Groep 1', rank: 'teacher'},
        {voornaam: 'Koray', achternaam: 'Avci', avatar: 'http://placehold.it/100', groep: 'Groep 1', rank: 'leerling'},
        {voornaam: 'Recep', achternaam: 'Ivedik', avatar: 'http://placehold.it/100', groep: 'Groep 3', rank: 'leerling'},
        {voornaam: 'Gel', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2', rank: 'leerling'},
        {voornaam: 'Yarim', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3', rank: 'leerling'},
        {voornaam: 'Gonlume', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3', rank: 'leerling'},
        {voornaam: 'Huzur', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2', rank: 'leerling'},
        {voornaam: 'Ver', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2', rank: 'leerling'},
        {voornaam: 'Omrume', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2', rank: 'leerling'}
        ];
  
                let newData = {
                    leerling: [],
                    teacher: []
                }
  
                for (var i = 0; i &lt; this.items.length; i++) {
                    var element = this.items[i];
  
                    newData[element.rank].push(element);
                }
        }
  }
  </code></pre>
  
  <p>Thanks in advance!</p>