Sorting an array of objects alphabetically
Solution 1
cars = [{
id: 1,
items: [{
name: 'ab',
description: 'this is car1 description'
},{
name: 'cd',
description: 'this is car2 description'
},{
name: 'car3',
description: 'this is car3 description'
},{
name: 'aaa',
description: 'this is car4 description'
},{
name: 'car5',
description: 'this is car5 description'
}]
}];
cars[0].items.sort((a,b) => a.name > b.name ? 1 : -1)
Solution 2
Or we can simplify to:
cars[0].items.sort((a,b) => a.name.localeCompare(b.name))
Solution 3
I find it most efficient to use a library like Underscore.js for utility functions like this:
Underscore.js and specifically the sortBy method.
Add underscorejs to your project and import it into your component.
import * as _ from 'underscore';
Then call the sort method and pass the array of objects and the key to sort on.
_.sortBy(car.items, 'name');
When you add or remove an item from the car array, resort the car.items collection and reassign it to car
car.items = _.sortBy(car.items, 'name');
Then you can display as you are now, with the sorted data.
Solution 4
naive sort with Array.prototype.sort()
cars.sort(function(x,y) {
if (x.items.name < y.items.name) return -1;
if (x.items.name > y.items.name) return 1;
return 0;
})
rgoal
Updated on June 14, 2022Comments
-
rgoal almost 2 years
I am trying to sort an array of object alphabetically , to make things simple I am using the below example. In my typscript I do splice to insert and remove items from array object.
Array
cars = [{ id: 1, items: [{ name: 'car1', description: 'this is car1 description' },{ name: 'car2', description: 'this is car2 description' },{ name: 'car3', description: 'this is car3 description' },{ name: 'car4', description: 'this is car4 description' },{ name: 'car5', description: 'this is car5 description' }] }];
html
<p-dataView [value]="cars" [paginator]="true" [rows]="5"> <p-header>List of Cars</p-header> <p-footer>Choose from the list.</p-footer> <ng-template let-car pTemplate="listItem"> <p-fieldset legend="Header" *ngIf="car.id === 1" [toggleable]="true"> <div *ngFor="let _car of car.items"> {{_car.name}} - {{_car.description}} </div> </p-fieldset> </ng-template> </p-dataView>
**********************************************UPDATE******************************** Sorry I have one more layer
cars = [{ id: 1, items: [{ Model:[{ name: 'car1', description: 'this is car1 description' }], Model:[{ name: 'car2', description: 'this is car2 description' }], }, id:2, items: [{ Model:[{ name: 'car13, description: 'this is car3 description' }], Model:[{ name: 'car4', description: 'this is car4 description' }], }] }];
I tried
cars[0].items.Model.sort((a,b) => a[0].name > b[0].name ? 1 : -1) //It did not work
also tried
cars[0].items.Model.sort(function (a, b) { var nameA = a.name.toLowerCase(); var nameB = b.name.toLowerCase(); if (nameA < nameB) //sort string ascending return -1 })
-
ConnorsFan over 5 yearsTake a look at this question.
-