Angular sorting and splitting and Array

Question

I apologize in advance if this is a stupid question but Angular and Typescript isn't my forte. I am helping a friend out and can't seem to get past this problem.

I have a players array that contains information like first name and kit colour.All I want to do is sort /group the array by kit color under specific H1 tags.

import { Component, VERSION } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  Players = [
    {
      FirstName: 'Vader',
      KitColour: 'Blue',
    },
    {
      FirstName: 'Darth',
      KitColour: 'Red',
    },
    {
      FirstName: 'Yeeeeet',
      KitColour: 'Red',
    },
    {
      FirstName: 'New',
      KitColour: 'Blue',
    },
  ];
  constructor() {
    this.Players.sort((a, b) => {
      var colorA = a.KitColour.toLowerCase();
      var colorB = b.KitColour.toLowerCase();
      if (colorA < colorB) {
        return -1;
      }
      if (colorA > colorB) {
        return 1;
      }
      return 0;
    });
    const sliceArray = (arr, chunkSize) => {
      const result = [];
      for (let i = 0; i < arr.length; i += chunkSize) {
        const chunk = arr.slice(i, i + chunkSize);
        result.push(chunk);
      }
      return result;
    };
    sliceArray(this.Players, 2);
    console.log(this.Players);
  }
}

<div class="container" *ngFor="let player of Players">
  <!-- <div class="Red" *ngIf="player.KitColour === 'Red'">
    <h1>Red Team</h1>
    <p>{{ player.FirstName }}</p>
  </div>
  <div class="Blue" *ngIf="player.KitColour === 'Blue'">
    <h1>Blue Team</h1>
    {{ player.FirstName }}
  </div> -->
  <div class="{{ player.KitColour }}">
    <h1>{{ player.KitColour }}</h1>
    <p>{{ player.FirstName }}</p>
</div>

My Output:

How can I just sort them once under a single H1 tag either Blue or Red depending on Kit Color ? Example: Red Player Names..

Blue Player Names..

Blastouz · Accepted Answer · 2022-03-28 20:01:26Z

1

The best way to tackle that would be to rework your object (or in a service or in the component).

groupByKitColor = (array: any) => {
    return array.reduce((prev, actual) => {
      prev[actual.KitColour] = prev[actual.KitColour] || [];
      prev[actual.KitColour].push(actual);
      return prev;
    }, Object.create(null));
  };

This solution will group the players under whatever number of colors you will add in the future. Then, just apply your CSS class.

See attached StackBlitz : https://stackblitz.com/edit/angular-ivy-dyflwe?file=src%2Fapp%2Fapp.component.html

PS: some comments here, you should do your sorting logic in the OnInit Lifecycle and not in the constructor (by convention) and your variables should follow the camelCase convention ;)

answered Mar 28, 2022 at 20:01

Blastouz

594 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tepete · Accepted Answer · 2022-03-28 20:33:50Z

1

Sort array by KitColour property

  Players = [
    {
      FirstName: 'Vader',
      KitColour: 'Blue',
    },
    {
      FirstName: 'Darth',
      KitColour: 'Red',
    },
    {
      FirstName: 'Yeeeeet',
      KitColour: 'Red',
    },
    {
      FirstName: 'New',
      KitColour: 'Blue',
    },
  ].sort((a, b) => a.KitColour.localeCompare(b.KitColour));

and use this html

   <div *ngFor="let player of Players; let index = index">
    <h1 *ngIf="0 === index">{{ player.KitColour }}</h1>
    <h1 *ngIf="0 !== index && player.KitColour! !== Players[index - 1].KitColour">
      {{ player.KitColour }}
    </h1>

    <p>{{ player.FirstName }}</p>
  </div>

edited Mar 28, 2022 at 20:33

answered Mar 28, 2022 at 20:13

Tepete

658 bronze badges

1 Comment

The Grey Wolf Over a year ago

Thanks so much. Makes sense now and works perfectly

Yozmo · Accepted Answer · 2022-03-28 19:58:59Z

0

Because you're putting the ngFor at the parent div, you'll have as much h1 elemements as the length of the array (one for each element). If you know your colors just extract the color outside of ngFor and then conditionally (with ngIf) display the names

answered Mar 28, 2022 at 19:58

Yozmo

5892 silver badges11 bronze badges

Comments

liguepk · Accepted Answer · 2022-03-28 19:59:41Z

0

If you know that there won't be any more colours added, one thing that you can do is split your array in two arrays : one for each colour.

Once you've done that, you can have one div by color, and put the *ngfor loop inside your p tag, so that you have the following :

<div class="container">
  <div class="Red">
    <h1>Red Team</h1>
    <p *ngFor="let redPlayer of RedPlayers">{{ redPlayer.FirstName }}</p>
  </div>
  <div class="Blue">
    <h1>Blue Team</h1>
    <p *ngFor="let bluePlayer of BluePlayers">{{ bluePlayer.FirstName }}
  </div>
</div>

answered Mar 28, 2022 at 19:59

liguepk

2011 silver badge6 bronze badges

Collectives™ on Stack Overflow

Angular sorting and splitting and Array

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related