CODEWITHSUNDEEP
javascriptarraysangulartypescript
The Grey Wolf
The Grey Wolf

Reputation: 133

Angular sorting and splitting and Array

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: enter image description here

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..

Upvotes: 0

Views: 846

Answers (4)

Tepete
Tepete

Reputation: 65

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>

Upvotes: 1

Blastouz
Blastouz

Reputation: 59

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 ;)

Upvotes: 1

liguepk
liguepk

Reputation: 191

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>

Upvotes: 0

Yozmo
Yozmo

Reputation: 581

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

Upvotes: 0

Related Questions