Consolidate multiple sorting functions into a single function to effectively sort by column

Question

Consolidate multiple sorting functions into a single function to effectively sort by column

Can someone help me simplify my sorting function for array columns? Currently, I have multiple functions like the one below for each column:

  sort() {
    if (this.sortAsc == false) {
      this.tab.sort((a, b) => {
        return a.name.localeCompare(b.name);
      });
      this.sortAsc = true;
    } else {
      this.tab.sort((a, b) => {
        }
        return b.name.localeCompare(a.name);
      });
      this.sortAsc = false;
    }
  }

An excerpt from the table structure:

         ...
          <tr>
              <th (click)="sort()">Name</th>
              ...
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of tab" (click)="getById(item.id)" tabindex="0">
            <td> {{ item.name }} </td>
            ...
          </tr>
         ...

angular typescript sorting optimization

Answer 1

Answer №1

If you want to sort by a specific variable, you can add a parameter to the sorting function like this: sort('name') Within the sort function, you can then utilize that parameter to determine how you want to sort.

sort(val: string) {
    if(!this.sortAsc) {
        this.tab.sort((a,b) => {
            return a[val].localeCompare(b[val]);
        });
        this.sortAsc = true;
    }
    ...
}

Answer 2

If you want to sort by a specific variable, you can add a parameter to the sorting function like this: sort('name') Within the sort function, you can then utilize that parameter to determine how you want to sort.

sort(val: string) {
    if(!this.sortAsc) {
        this.tab.sort((a,b) => {
            return a[val].localeCompare(b[val]);
        });
        this.sortAsc = true;
    }
    ...
}

Consolidate multiple sorting functions into a single function to effectively sort by column

Answer №1

Similar questions

Encountered a setback while constructing a library of Angular 7 components

I haven't encountered any type warnings in the places where I anticipated them

Make sure a Typescript array contains a particular value

Angular input range slider that automatically rounds decimal values from the data bindings

Executing an individual .ts file within a Next.js application using ts-node for the purpose of testing

Accessing the element reference within a custom attribute directive in Angular through a projected template using ngTemplateOutlet

Is it possible to extract the value from a switchMap observable instead of just receiving the observable itself?

Vue is encountering difficulties resolving the index.vue file located in the parent directory

Extending a generic typed class in Typescript allows for the creation of

The final position of the Angular increment animation does not hold

The Postman tool is able to provide a successful response, but when attempting to call the same API through Angular code,

Passing a type as an argument in Typescript

Angular4 does not recognize this.form.get as a valid function

Create an interactive and responsive user interface for Object using the Angular framework

Issue encountered when attempting to assign `fontWeight` within `makeStyles` using `theme` in Typescript: Error message states that the property is not

Obtaining the dimensions of each individual child component within an NgTemplate

Preventing duplicate actions on a Subject with Angular 7's rxjs debounceTime operator

Steps for building a TypeScript project for server side using webpack

Leveraging moment.format Function in Angular within an HTML Context

Angular with RxJS: Observable with synchronous data flow