Why am I not able to sort multiple times?

Question

So i am trying to sort an array of data about 4 times to use in 4 different places. I could probably save for the back end but I would rather this way.

I seem to be having an issue where only one sort seems to be working. Like this this is the component

export class xService {
  comp$: Observable<any[]> | undefined;
  c1 = new Array();
cp1 = new Array();
at_b3 = new Array();
at_b = new Array();
at_b2 = new Array();

  constructor(public a_s: AServ, private db: AngularFireDatabase) {

    this.comp$ = this.a_s.xc$.pipe(switchMap((x) => {
      return this.db.list('people/'+x).valueChanges();   
      }));

      this.comp$.subscribe({next: (value) => {
this.c1 = value[0];
this.cp1 = value[0].users;
this.at_b3 = value[0].users;

this.a_s.statsa.push(value[0].users);

  this.at_b = this.cp1.sort((a: any, b: any) => Number(a.stats[0].day_off) - Number(b.stats[0].day_off)).reverse();
  this.at_b2 = this.cp1.sort((a: any, b: any) => Number(a.stats[0].places_went) - Number(b.stats[0].places_went)).reverse();
  
  console.log(this.at_b)
  console.log(this.at_b2)


      }
    });


   }
}

This part is the issue

  this.at_b = this.cp1.sort((a: any, b: any) => Number(a.stats[0].day_off) - Number(b.stats[0].day_off)).reverse();
  this.at_b2 = this.cp1.sort((a: any, b: any) => Number(a.stats[0].places_went) - Number(b.stats[0].places_went)).reverse();

When i try rendering or using console log. I can't get 2 distinct arrays I get the same one.

Answer 1

You need to create a copy of the arrays prior to sorting:

export class xService {
  comp$: Observable<any[]> | undefined;
  c1 = new Array();
  cp1 = new Array();
  at_b3 = new Array();
  at_b = new Array();
  at_b2 = new Array();

  constructor(public a_s: AServ, private db: AngularFireDatabase) {
    this.comp$ = this.a_s.xc$.pipe(
      switchMap((x) => {
        return this.db.list("people/" + x).valueChanges();
      })
    );

    this.comp$.subscribe({
      next: (value) => {
        this.c1 = value[0];
        this.cp1 = value[0].users;
        this.at_b3 = value[0].users;

        this.a_s.statsa.push(value[0].users);

        this.at_b = [...this.cp1]
          .sort(
            (a: any, b: any) =>
              Number(a.stats[0].day_off) - Number(b.stats[0].day_off)
          )
          .reverse();
        this.at_b2 = [...this.cp1]
          .sort(
            (a: any, b: any) =>
              Number(a.stats[0].places_went) - Number(b.stats[0].places_went)
          )
          .reverse();

        console.log(this.at_b);
        console.log(this.at_b2);
      },
    });
  }
}

Note:

• Array.prototype.sort() sorts the array in place and returns the sorted array.

• When you make a call using sort() on cp1, it directly modifies cp1. Therefore, both this.at_b and this.at_b2 are sorted based on the last sort() operation performed, which outputs the same arrays.