Angular sorting and splitting and Array-CodePudding

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  *ngFor="let player of Players">
  <!-- <div  *ngIf="player.KitColour === 'Red'">
    <h1>Red Team</h1>
    <p>{{ player.FirstName }}</p>
  </div>
  <div  *ngIf="player.KitColour === 'Blue'">
    <h1>Blue Team</h1>
    {{ player.FirstName }}
  </div> -->
  <div >
    <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..

CodePudding user response：

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/app/app.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 ;)

CodePudding user response：

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>

CodePudding user response：

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

CodePudding user response：

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 >
  <div >
    <h1>Red Team</h1>
    <p *ngFor="let redPlayer of RedPlayers">{{ redPlayer.FirstName }}</p>
  </div>
  <div >
    <h1>Blue Team</h1>
    <p *ngFor="let bluePlayer of BluePlayers">{{ bluePlayer.FirstName }}
  </div>
</div>