Sorting an array of objects alphabetically

Question

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
            })

Take a look at this question.

Martin Parenteau
– Martin Parenteau

2019-01-21 21:54:36 +00:00
Commented Jan 21, 2019 at 21:54 — Martin Parenteau
– Martin Parenteau, Commented Jan 21, 2019 at 21:54
you have to loop in the html over cars and not car

Mark Baumann
– Mark Baumann

2023-01-02 15:01:24 +00:00
Commented Jan 2, 2023 at 15:01 — Mark Baumann
– Mark Baumann, Commented Jan 2, 2023 at 15:01

Flor de Cantuta Tello Sarmient · Accepted Answer · 2019-01-21 22:53:56Z

19

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)

answered Jan 21, 2019 at 22:53

Flor de Cantuta Tello Sarmient

4362 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Taran · Accepted Answer · 2021-02-04 21:36:59Z

5

Or we can simplify to:

 cars[0].items.sort((a,b) => a.name.localeCompare(b.name))

answered Feb 4, 2021 at 21:36

Taran

3,24130 silver badges25 bronze badges

Comments

Stephen R. Smith · Accepted Answer · 2019-01-21 22:01:59Z

1

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.

answered Jan 21, 2019 at 22:01

Stephen R. Smith

3,4001 gold badge28 silver badges46 bronze badges

Comments

Derviş Kayımbaşıoğlu · Accepted Answer · 2019-01-21 22:03:24Z

1

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

answered Jan 21, 2019 at 22:03

Derviş Kayımbaşıoğlu

30.9k4 gold badges55 silver badges79 bronze badges

Collectives™ on Stack Overflow

Sorting an array of objects alphabetically

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related