Angular, sort objects by their keys

Question

I had to sort a list of objects - {name:'name', email:'email} by their keys, ex. by email, so they all be rendered with email key/value pair as a first key/value pair and I was surprised about the solution i came up to - Object.assign() when i loop through array and assign email key/value pair to each object:

objects = [{name: 'name1', phone: 'phone1', email: 'email1'},
            {name: 'name1', phone: 'phone1', email: 'email1'},
            {name: 'name1', phone: 'phone1', email: 'email1'}]

sort(val) {    
  for (let i=0; i < this.objects.length; i++) {
    let temp = {};
    temp[val] = null; 
    this.objects[i] = Object.assign(temp, this.objects[i])  
  }
}

The rest is done by Angular's ChangeDetection. Are there better ways or can you tell any possible issues with this? (I still don't feel very proficient in Javascript, so just wondering)

Here is a StackBlitz's DEMO

Answer 1

Object assign via ... operator

There is a sorter way to do the property order if you use the spread operator to assign properties.

function propOrderFirst(key,objects){
     for(var i = 0; i < objects.length; i++){
          objects[i] = {[key] : null, ...objects[i]};
     }
     return objects;
}

The problem is

const objs = [{name: 'name1', phone: 'phone1', email: 'email1'},
        {name: 'name1', phone: 'phone1', email: 'email2'},
        {name: 'name1', phone: 'phone1', email: 'email3'}];

const obj1 = obj[0];

objs = propOrderFirst("email",objs);

if(obj1 !== objs[0]) { // true as you have created a new instance 

Reorder in place

But you do lose the object reference that may not be the best option. You can reorder the object properties and still keep the object reference by using delete to remove properties.

A little more complex as you need to delete all the properties you want to move the new property position in-front of

function propOrderFirst(key, objects){
    const keys = Object.keys(objects[0]);  // assuming all objects have same properties
                                           // If not move this inside loop
    for (const object of objects) {
        const temp = {...object};     // get a copy of object
        for (const k of keys) { delete object[k] };  // remove all properties
        object[key] = temp[key];      // add the key you want first
        Object.assign(object, temp);  // assign the objects properties back
    }
    return objects;
 }

So now

const objs = [{name: 'name1', phone: 'phone1', email: 'email1'},
        {name: 'name1', phone: 'phone1', email: 'email2'},
        {name: 'name1', phone: 'phone1', email: 'email3'}];

const obj1 = obj[0];

objs = propOrderFirst("email",objs);

if(obj1 === objs[0]) { // true as you have reordered in place }

Answer 2

You are doing it in the most difficult way possible.

What you actually want to do is to define the order of properties, e.g:

const propertyOrder = ['name', 'phone', 'email'];

or

const propertyOrder = Object.keys(object[0]).sort(...);

and pass that order to your components with the object instead of using a random ordering of Object.keys.

Answer 3

Try the solutions standard library offers you first.

Arrays in javascript could be sorted by using array.sort()

which additionally accepts a comparer predicate

sort((a, b) => a.name > b.name ? 1 : -1)

or alternatively

sort(function(a, b) {
  if (a.name > b.name) {
     return 1;
  }

  if (a.name < b.name) {
     return -1;
  }

  return 0;
});