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

Transforming a TypeScript enum into an array of objects

Angular - Switching Displayed Information

Enhancing Test Components with Providers in "React Testing Library": A Step-by-Step Guide

Issues with command functionality within the VS Code integrated terminal (Bash) causing disruptions

What is the best way to initiate a class constructor with certain parameters left out?

Leveraging ES Module packages in Azure TypeScript Function Development

Tips for Implementing a Button Click Sound in Ionic 2

Tips for retrieving a child component's content children in Angular 2

The Vue Router hooks are not being activated within the component when utilizing Typescript

Make Ionic 2 Navbar exclusively utilize setRoot() instead of pop()

Combining class and data within an iteration while utilizing ngFor

Discover the outcome of clicking on an object (mock tests)

Utilizing Express JS to make 2 separate GET requests

I aim to display interconnected information from various APIs in a cohesive manner

Is there a way to streamline this generator without using recursion?

Enabling or disabling a button dynamically in Ionic based on a conditional statement

Steps for inserting a script tag in an Angular component

Mapping JSON data from an array with multiple properties

Is it possible to lengthen a function in TypeScript?

What is the best way to find a match for {0} while still allowing for proper