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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arrange the items in the last row of the flex layout with equal spacing between them

How can I arrange items in rows with equal space between them, without a large gap in the last row? <div fxFlex="row wrap" fxLayoutAlign="space-around"> <my-item *ngFor="let item of items"></my-item> </div> Current Issue: htt ...

The production build of Angular 2 with special effects amplification

I am currently working on an Angular 2 Beta 8 app that I need to bundle and minify for production deployment. Despite configuring the system to generate a Single File eXecutable (SFX) bundle, I am encountering issues with creating a minified version of the ...

Having difficulty accessing certain code in TypeScript TS

Struggling with a TypeScript if else code that is causing errors when trying to access it. The specific error message being displayed is: "Cannot read properties of undefined (reading 'setNewsProvider')" Code Snippet if (this.newsShow != ...

typescript Can you explain the significance of square brackets in an interface?

I came across this code snippet in vue at the following GitHub link declare const RefSymbol: unique symbol export declare const RawSymbol: unique symbol export interface Ref<T = any> { value: T [RefSymbol]: true } Can someone explain what Re ...

Encountering an error while implementing a Typescript addEventListener for keydown events

Struggling with adding and removing event listeners to HTML elements capable of focus, such as buttons. encountering a typescript error specifically related to the lines of code responsible for adding and removing the event listener: focusableElements.fo ...

Issues with Angular Structural Directives arising from NPM installation concerns are causing problems

I have developed an npm package called sezam-shareds To integrate the package into a new project, you need to follow these steps: Add the following component from the package: <sezam-overflow [show]="true"></sezam-overflow> to a compo ...

Revving up the RxJS Engine: Unleashing the Potential of race

I'm currently working on implementing a unique input component that will execute a search when either the input value changes (with a debounce of 500ms) or when the enter key is pressed. My goal is to avoid emitting the search term twice - once on the ...

Error: Unable to locate 'v8' in NextJS when using Twin Macro

I am encountering the error message Module not found: Can't resolve 'v8' when using a package in Nextjs with TypeScript. If I use a .js file, everything works fine. However, when I switch to a .tsx file, it throws a Module Not found error. ...

Instructions for authenticating with Google silently in the background

I implemented a Google authentication system based on the tutorial provided in this blog post. Link to Tutorial However, I am facing an issue where a popup always appears for users to login. I would prefer the login process to occur in the background, wh ...

Cross-origin resource sharing (CORS): In PHP, the response to the preflight request is not successfully passing. I am permitting

With the abundance of CORS posts already out there, I find myself adding to them in search of a solution. My dilemma involves building an angular 4 application that interacts with my php api. Locally, everything works seamlessly. However, once I upload the ...

What is the best way to implement CSS Float in typescript programming?

For a specific purpose, I am passing CSS Float as props. To achieve this, I have to define it in the following way: type Props = { float: ???? } const Component = ({ float }: Props) => {......} What is the most effective approach to accomplish this? ...

A destructured object with a Typescript interface

While working on a React / TypeScript project, I encountered an error involving destructuring an object. The issue arises when I try to destructure notificationData within the publish function. An error message stating "Property 'messages' does ...

What is the best way to transform this JSON data into an array of key-value pairs in JavaScript?

Dealing with nested JSON data can be challenging, especially when trying to extract key-value pairs efficiently. If anyone has suggestions on how to simplify this process and improve readability, please share your insights. The goal is to transform the ne ...

What is the purpose of specifying an 'any' return type in TypeScript?

As an example: function retrieveUserInformation(input: any): any { return input } It may seem unnecessary to declare that "any data type can be returned". Is there a specific reason for this? ...

Utilizing TypeScript namespaced classes as external modules in Node.js: A step-by-step guide

My current dilemma involves using namespaced TypeScript classes as external modules in Node.js. Many suggest that it simply can't be done and advise against using namespaces altogether. However, our extensive codebase is structured using namespaces, ...

Simulated database in a Service using TypeScript with Node

Struggling with a unit test, I need to mock the this.orderRepository.findById(id); method to find an object by its ID. Although I've set the return value, the test keeps failing. This is my first time creating a unit test in Node using TypeScript and ...

Having trouble resolving all parameters for my directive in Angular 2

Currently, I am working on a directive that relies on TemplateRef<any> and ViewContainerRef as dependencies. However, when trying to inject these dependencies into my directive, it fails to do so. Below is the code snippet I'm working with: mai ...

Encountering the Selenium Webdriver HTTP error within an Angular 4 project

ERROR Detected Issue found in: ./node_modules/selenium-webdriver/http/index.js Module not found: Error: Unable to locate 'http' in 'C:\Users\aprajita.singh\Documents\Angular 4\Auto-Trender-Project\node_modules ...

The application of *ngComponentOutlet ngModuleFactory is unreliable when deployed in a production environment

While working on Angular 4, I utilized ngComponentOutlet to create dynamic components. In the development environment, my code functions properly but encounters issues in production. @Component({ selector: 'dynamic-detail', template: `<ng ...

Proper Input Component Typing in React/Typescript with MobX

Looking to create a custom React Input component using Typescript for MobX that requires the following input props: a mobx store stateObject a key from that store stateKey I want Typescript to ensure that stateObject[stateKey] is specifically of type str ...