Typescript custom sorting feature

Question

Typescript custom sorting feature

Imagine I have an array

products= [{
"Name":'xyz',
'ID': 1
},
{
"Name":'abc',
'ID': 5
},
{
"Name":'def',
'ID': 3
}
]

sortOrder=[3,1,5]

If I run the following code:

sortOrder.forEach((item) => {
        products.sort((productA) => {
          if (productA.ID=== item) { return 1; } else { return -1; }
        });
      });

The sorting is not as per the order specified in sortOrder. I want to sort the products array based on the sortOrder mentioned in the sortOrder array. So, the output of the above should be,

{ "Name":'def', 'ID': 3 },{ "Name":'xyz', 'ID': 1 },{ "Name":'abc', 'ID': 5 }

Any suggestions?

typescript sorting

Answer 1

Answer №1

Revised the solution to handle repeated values in the products list.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  products= [{
"Name":'xyz',
'ID': 1
},
{
"Name":'abc',
'ID': 5
},
{
"Name":'def',
'ID': 3
},{
"Name":'xyz',
'ID': 1
},
{
"Name":'abc',
'ID': 5
},
{
"Name":'def',
'ID': 3
},
{
"Name":'def',
'ID': 3
},
{
"Name":'def',
'ID': 3
}
]

sortOrder=[3,1,5];

sortProducts(){
  var tempSortedProducts :any[]=[];

  for(let idx=0; idx<this.sortOrder.length; idx++){

      this.products.forEach((product)=>{
        if(product.ID===this.sortOrder[idx]){
            tempSortedProducts.push(product)
        } 
      })
  }
  this.products = tempSortedProducts;
}
}

Link to Stackbliz Example: Custom Sort

Answer 2

Revised the solution to handle repeated values in the products list.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  products= [{
"Name":'xyz',
'ID': 1
},
{
"Name":'abc',
'ID': 5
},
{
"Name":'def',
'ID': 3
},{
"Name":'xyz',
'ID': 1
},
{
"Name":'abc',
'ID': 5
},
{
"Name":'def',
'ID': 3
},
{
"Name":'def',
'ID': 3
},
{
"Name":'def',
'ID': 3
}
]

sortOrder=[3,1,5];

sortProducts(){
  var tempSortedProducts :any[]=[];

  for(let idx=0; idx<this.sortOrder.length; idx++){

      this.products.forEach((product)=>{
        if(product.ID===this.sortOrder[idx]){
            tempSortedProducts.push(product)
        } 
      })
  }
  this.products = tempSortedProducts;
}
}

Link to Stackbliz Example: Custom Sort

Typescript custom sorting feature

Answer №1

Similar questions

Create an array using modern ES6 imports syntax

Framer Motion's AnimatePresence feature fails to trigger animations when switching between pages

Is there a way to identify which elements are currently within the visible viewport?

Looping Angular Components are executed

Access exclusive content by subscribing now!

What is the best way to combine a set of k sorted lists?

Unlocking the power of module augmentation in Typescript: Enhancing library models within your app domain

Tips for updating the font size of your MUI Accordion title

What is the injection token used for a specialized constructor of a generic component?

Experimenting with a Collection of Items - Jest

The HTTP DELETE request encountered a TypeError, stating that error.json is not a valid function

TSLint is unable to locate a custom module containing a custom d.ts file

The options passed to createReadStream in TypeScript do not accept {start: 90, end: 99}

TypeScript is still throwing an error even after verifying with the hasOwnProperty

It seems that the Angular2-google-maps library is having trouble with installation

The main module's postinstall process is initiated before the sub-module's postinstall process

Alert: Angular has detected that the entry point '@libray-package' includes deep imports into 'module/file'

The issue with functions not executing when triggered by HammerJS

Angular - developing a custom web element to enhance the project

How can TypeScript be used to enable CSV or PDF export in a material-react-table?