Trying to show images and counting the teachers from each group

Question

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.

So basically I want a page with a ionic card with the studens and the teachers. Like this: https://gyazo.com/61933179c66a1bb815e461f1a158a92c
This is what I have: https://gyazo.com/62123a96be5a2370f4b1300437cff974

With my method it counts every person in the groep. But I want to count per rank.

HTML

<ion-header>

    <ion-navbar color ="primary">
        <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>Amcik</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content>
      <ion-searchbar>
    </ion-searchbar>
      <ion-grid>
        <ion-row>
          <ion-col col-12 col-md *ngFor="let item of items">
            <ion-card class="groep">
              <ion-item>
                <h2>{{ item.name }}</h2>
                </ion-item>
                <div class="foto"*ngFor="let i of item.items">
                    <img class="pic" src={{i.avatar}}>
                </div>
                <p>{{ item.count }} leerlingen</p>
            </ion-card>
          </ion-col>
        </ion-row>
    </ion-grid>
    </ion-content>

TS PAGE

 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 < this.items.length; i++) {
                  var element = this.items[i];

                  newData[element.rank].push(element);
              }
      }
}

Thanks in advance!

add another if block `if (this.items[i].rank == 'teacher')` and perform operation on condition base. — hrdkisback, Jun 06 '17 at 12:40

Bas van Dijk · Accepted Answer · 2017-06-06T15:58:20.217

0

To achieve your request this is the receipe to follow so

Sort the data by groep
Iterate over the sorted data and store it in a new array split by the groups.
Within this group we split the teachers and students, each in their own array.

Now we can iterate over the new data for each group and within a group iterate over students and teachers.

See http://plnkr.co/edit/UAjTVO?p=preview

Sorting algorithm from Sort array of objects by single key with date value

var groupIndex = -1;

// Sort data by groep
items.sort(function (a, b) {
    let keyA = a.groep;
    let keyB = b.groep;
    if (keyA < keyB) return -1;
    if (keyA > keyB) return 1;
    return 0;
});

let previousGroupId = '';

// Iterate over all students
for (var i = 0; i < items.length; i++) {

    var element = items[i];

    // Check if the group already is listed if not create one
    if (element.groep !== previousGroupId) {

        this.groupData.push({
            name: element.groep,
            teachers: [],
            students: []
        });

        previousGroupId = element.groep;
        groupIndex++;
    }

    if (element.rank === 'leerling') {
        this.groupData[groupIndex].students.push(element);
    } else {
        this.groupData[groupIndex].teachers.push(element);
    }

}

HTML

<ion-header>

    <ion-navbar color="primary">
        <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>Amcik</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-searchbar>
    </ion-searchbar>
    <ion-grid>
        <ion-row>
            <ion-col col-12 col-md *ngFor="let group of groupData">
                <ion-card class="groep">
                    <ion-item>
                        <h2>{{ group.name }}</h2>

                        <h3>Students ({{group.students.length}})</h3>

                        <ul>
                            <li *ngFor="let student of group.students">
                                <img [src]="student.avatar" /> {{ student.voornaam }}
                            </li>
                        </ul>

                        <h3>Teachers ({{group.teachers.length}})</h3>
                        <ul>
                            <li *ngFor="let teacher of group.teachers">
                                <img [src]="teacher.avatar" /> {{ teacher.voornaam }}
                            </li>
                        </ul>

                    </ion-item>

                </ion-card>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

edited Jun 06 '17 at 15:58

answered Jun 06 '17 at 13:23

Bas van Dijk

9,933
10
55
91

And on the html page? – Mert Sezmis Jun 06 '17 at 13:30
You can just use `newData.leerling.length` and `newData.teacher.length` for the length and iterate over `newData` in a `ngFor` for your GUI – Bas van Dijk Jun 06 '17 at 13:33
I am sorry but I dont understand this one. What do I have to type on the html can you explain it more please – Mert Sezmis Jun 06 '17 at 13:36
Error in ./Page2 class Page2 - caused by: Cannot read property 'leerlingen' of undefined – Mert Sezmis Jun 06 '17 at 13:53
`leerling` or `leerlingen`? i think it's {{newData.leerling.length}} – hrdkisback Jun 06 '17 at 13:59
leerling/leerlingen both dont work can you show the ts page as well maybe thats what i'm doing wrong – Mert Sezmis Jun 06 '17 at 14:02
try to change `public newData` in `.ts` file – hrdkisback Jun 06 '17 at 14:13
I updated the .ts page, I think I did something wrong. – Mert Sezmis Jun 06 '17 at 14:18
Btw any idea how I can get the 'avatar' aswell – Mert Sezmis Jun 06 '17 at 14:23
Thanks for the effort but I think I explained it wrong. I want one ion-card like this: https://gyazo.com/36ac434ca0171b72ee8d1a527e03c5d5 You can see the group name, how many students there are in the group and the teachers. You can see the picture as well. That is what I kinda want. – Mert Sezmis Jun 06 '17 at 14:46
You have a lot of groups and every group has its own students and teachers. I want to count hem and show the picture in the ion-card – Mert Sezmis Jun 06 '17 at 14:49
Ok let me check – Bas van Dijk Jun 06 '17 at 14:51
Sorry I had no time to work on it yesterday, I will have a look now! – Mert Sezmis Jun 08 '17 at 08:06
Thanks! the code works any idea how I can get the css right? @BasvanDijk – Mert Sezmis Jun 08 '17 at 08:38
@MertSezmis Cool! Then you can mark this answer as solved. I recommend to create a new issue if you're stuck with the CSS. Please provide an example with what you've tried and where you are stuck. – Bas van Dijk Jun 08 '17 at 09:12

Trying to show images and counting the teachers from each group

HTML

TS PAGE

1 Answers1