Sorting arrays in Typescript

Is there a way to alphabetically sort an array of objects in Typescript based on a specific field? The array I have currently looks like this - https://i.stack.imgur.com/fQ3PA.png I'm interested in sorting it alphabetically by the 'channel' field.

I attempted the following approach that I found online. Although it didn't throw any errors, it also didn't give me the results I was expecting.

 this.currentPickSelection = this.currentPickSelection.sort((a, b) => {
      if (a.channel > b.channel) {
        return 1;
      }
      if (a.channel < b.channel) {
        return -1;
      }
      return 0;
arraysangulartypescript

Answer №1

Your task involves sorting a multidimensional array using the array#sort method with this code:

this.currentPickSelection.sort((x, y) => x[0].category.localeCompare(y[0].category))

Answer №2

To solve this problem, you need to organize a list of objects.

Transform your JSON object into an array of multiple objects.

[
    {
        "pickCode":"",
        "cbsCode": "",
        "channel": "",
        "logo": "",
        "tag": ""
    },
    {
        "pickCode":"",
        "cbsCode": "",
        "channel": "",
        "logo": "",
        "tag": ""
    },
    {
        "pickCode":"",
        "cbsCode": "",
        "channel": "",
        "logo": "",
        "tag": ""
    }
]

Create a function that can be reused with similar logic but includes the toLowerCase() method as well.

private compare(a, b) {
 if (a.channel.toLowerCase() < b.channel.toLowerCase()) {
  return -1;
 }
 if (a.channel.toLowerCase() > b.channel.toLowerCase()) {
  return 1;
 }
 return 0;
}

Assuming the name of the variable holding the array of objects is channelDetails,

simply run 

this.channelDetails.sort(this.compare);
to achieve the desired sorting result.

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

Can a function call in C be written on a single line with an array of strings or integers as a parameter?

Consider these two functions : void my_function1(char ** params, int size) { for (int i=0; i<size; i++) printf("%s \n",params[i]); } void my_function2(int * values, int size) { for (int i=0; i<size; i++) printf("%d \n",values[i]); ...

arrayscparametersargumentsfunction-call

Using Angular2 Pipes to display raw HTML content

I am currently working on developing a custom pipe in Angular2 that is capable of outputting raw HTML. My goal is to take input with newlines and convert them into HTML line breaks. Can anyone guide me on how to display raw HTML from an Angular2 pipe? Bel ...

angular

Retrieve data from REST call to populate Material dropdown menu

I am looking to dynamically populate a dropdown menu with data retrieved from a Rest API. I attempted the following code: <Select id="country-helper"> {array.map((element) => ( <MenuItem value={element.code}>{element.country}& ...

javascriptreactjstypescript

Sort the array by the elements in a separate array

Here is a filters array with three values: serviceCode1, serviceCode2, and serviceCode3. ['serviceCode1', 'serviceCode2', 'serviceCode3'] I have another array with approximately 78 records that I want to filter based on the a ...

javascriptangulartypescript

Dynamic content within an Angular Swiper

Greetings, Experts! I am a newcomer to angular and have successfully created 3 components: Swiper YouTube frame Map display Currently, I am facing a challenge where I need to utilize the swiper component multiple times on the homepage. The first instanc ...

angulardynamicswiper.js

Issue with Angular standalone component importation causing rendering issue in HTML

Recently, I started working with Angular and I am currently creating a clone using Firebase. While working on this project, Angular is throwing two errors at me: The Component AppComponent is standalone and cannot be declared in an NgModule. Should it b ...

angulartypescript

What is the best way to cycle through a JSON array of objects using JavaScript and jQuery?

Currently, my focus is on understanding JavaScript and JSON objects along with arrays. One of the tasks assigned to me involves iterating through the following array: {"6784": {"OD": [ { "od_id":"587641", ...

javascriptjqueryarraysjson

The angular material navigation bar is refusing to open the dropdown menus

I am currently working on an angular project where I want to implement a collapsible menu for users after they log in. However, the code I have written for the material nav bar is not functioning as expected when clicked. <mat-toolbar color="pr ...

angularangular-material

Components that rely on Angular's properties

I currently have three main components in my project: CategoryComponent - responsible for displaying a list of categories ListComponent - displays elements based on the selected category ScreenComponent - combines MenuComponent and ContentComponent toget ...

angular

Manipulating Angular and Typescript to utilize the method's parameter value as a JavaScript object's value

I am currently working with Ionic, Angular, and Typescript, attempting to dynamically set the value of a location based on the parameter passed from a method. Here is the relevant code snippet: async fileWrite(location) { try { const result = a ...

javascriptangulartypescriptionic-frameworkcapacitor

Encountering challenges when adjusting height based on screen size in Angular 6

Utilizing HostListener to adjust the height based on screen size works well. However, during page load, "event.target.innerHeight" returns undefined until the browser height is changed. To address this issue, the value needs to be initialized. Initially, i ...

javascriptjqueryangularjsangularbootstrap-4

Deduce the Prop Component Type by Examining the Attribute Type

I am facing an issue with a component that requires a `labels` attribute. <Component defaultValue={FURNITURE.BED} labels={[ { value: FURNITURE.BED, text: 'Bed', }, { value: FURNITURE.COUCH, text: 'C ...

typescript

Validation of dynamic fields in Angular 2 forms

I am currently working on a project using Angular 4.X where I need to dynamically create HTML input fields, mostly of type text, upon button click. Although the creation of these input boxes is functioning properly, I am facing challenges when it comes to ...

angularangular2-forms

Encountering an error in Angular 8 with the plugin: Unhandled ReferenceError for SystemJS

I recently followed a tutorial on integrating plugins into my Angular application at this link. I'm trying to create a component in my Angular app that can execute and display an external component. However, I encountered the following error: Uncaugh ...

angulartypescriptplugins

What is the best way to retrieve a number from an array?

Query: Let's say we have the following numbers in our array: {1,2,3,4,5,6,7,8} Each number represents a position like so: 1=1 , 2=2 , 3=3, 4=4, 5=5, 6=6, 7=7, 8=8 These are not the positions in the array, but rather the number positions ...

javaarrays

Tips for obtaining a variable step size in react-chartjs-2

I am currently utilizing Chart.js in typescript to create graphical charts. My objective is to dynamically adjust weight values while maintaining a specified minimum and maximum. Specifically, I aim to display 5 ticks on the Y-axis regardless of the incomi ...

javascriptreactjstypescriptchartsreact-chartjs

Angular Material 2 with Customized Moment.js Formatting

Is there a way to display the year, month, day, hours, minutes, and seconds in the input field of my material datepicker? I have successfully customized the parse() and format() methods in my own DateAdapter using native JavaScript objects. Howe ...

javascriptangulartypescriptmomentjsangular-material2

Error with dateAdapter targeting a particular language

Currently facing an issue with the Angular material date picker when using a specific language - ka. Here is an example of the problem: constructor( private dateAdapter: DateAdapter<Date>, public noticesService:NoticesService, public d ...

angulardatepickerlocale

Combining results from multiple subscriptions in RxJS leads to a TypeScript compiler error

I am utilizing an Angular service that provides a filterObservable. To combine multiple calls, I am using Rx.Observable.zip(). Although it functions as expected, my TypeScript compiler is throwing an error for the method: error TS2346: Supplied paramete ...

angularjstypescriptrxjs

The Angular program is receiving significant data from the backend, causing the numbers to be presented in a disorganized manner within an

My Angular 7 application includes a service that fetches data from a WebApi utilizing EntityFramework to retrieve information. The issue arises when numeric fields with more than 18 digits are incorrectly displayed (e.g., the number 23434343434345353453,3 ...

c#angulartypescriptbig.js