Sorting Array-like Object Angular

Question

I have an object:

{
  "200737212": {
    "style": {
      "make": {
        "id": 200001510,
        "name": "Jeep",
        "niceName": "jeep"
      },
      "model": {
        "id": "Jeep_Cherokee",
        "name": "Cherokee",
        "niceName": "cherokee"
      },
      "price": {
        "deliveryCharges": 995,
        "baseInvoice": 23360,
        "baseMSRP": 23495
      },
      "id": 200737212,
      "name": "Sport 4dr SUV (2.4L 4cyl 9A)",
      "trim": "Sport"
    },
    "config": {
      "id": 200737212,
      "includedItems": [],
      "furtherRemovals": []
    },
    "lease": {
      "leaseStart": 200,
      "onePayStart": 150
    }
  },
  "200737213": {
    "style": {
      "make": {
        "id": 200001510,
        "name": "Jeep",
        "niceName": "jeep"
      },
      "model": {
        "id": "Jeep_Cherokee",
        "name": "Cherokee",
        "niceName": "cherokee"
      },
      "price": {
        "deliveryCharges": 995,
        "baseInvoice": 24083,
        "baseMSRP": 24290
      },
      "id": 200737213,
      "name": "Altitude 4dr SUV (2.4L 4cyl 9A)",
      "trim": "Altitude"
    },
    "config": {
      "id": 200737213,
      "includedItems": [],
      "furtherRemovals": []
    },
    "lease": {
      "leaseStart": 300,
      "onePayStart": 250
    }
  },
  "200737214": {
    "style": {
      "make": {
        "id": 200001510,
        "name": "Jeep",
        "niceName": "jeep"
      },
      "model": {
        "id": "Jeep_Cherokee",
        "name": "Cherokee",
        "niceName": "cherokee"
      },
      "price": {
        "deliveryCharges": 995,
        "baseInvoice": 24818,
        "baseMSRP": 25295
      },
      "id": 200737214,
      "name": "Latitude 4dr SUV (2.4L 4cyl 9A)",
      "trim": "Latitude"
    },
    "config": {
      "id": 200737214,
      "includedItems": [],
      "furtherRemovals": []
    },
    "lease": {
      "leaseStart": 400,
      "onePayStart": 350
    }
  },
  "200737215": {
    "style": {
      "make": {
        "id": 200001510,
        "name": "Jeep",
        "niceName": "jeep"
      },
      "model": {
        "id": "Jeep_Cherokee",
        "name": "Cherokee",
        "niceName": "cherokee"
      },
      "price": {
        "deliveryCharges": 995,
        "baseInvoice": 28484,
        "baseMSRP": 29195
      },
      "id": 200737215,
      "name": "Limited 4dr SUV (2.4L 4cyl 9A)",
      "trim": "Limited"
    },
    "config": {
      "id": 200737215,
      "includedItems": [],
      "furtherRemovals": []
    },
    "lease": {
      "leaseStart": null,
      "onePayStart": null
    }
  }
}

Note that

Object.keys(Object) = [200737212, 200737213, 200737214, 200737215]

and it's data structure is as follows:

{
 {
  style: {},
  config: {},
  lease: {}
 },
 {
  style: {},
  config: {},
  lease: {}
 },
 {
  style: {},
  config: {},
  lease: {}
 }
}

In Object[id].style.price.baseMSRP contains the price value in which I want to sort low --> high

I created a function:

    function sortByPrice(a: any, b: any) {
        console.log(a, b);
        const priceA = a.style.price.baseMSRP;
        const priceB = b.style.price.baseMSRP;
        if (priceA < priceB) {
            return -1;
        }
        if (priceA > priceB) {
            return 1;
        }
        return 0;
    }

I tried to do this:

this.object = this.object.sort(sortByPrice);

But sorting is not built-in to objects.

I have a template:

<ng-container *ngFor="let id of carIDs">
        <md-card *ngIf="activeYear === cars[id]['style'].year.year">
                <md-card-content fxFlex>
                    <ul class="fa-ul">
                        <li><i class="fa-li fa fa-thermometer-2"></i>{{cars[id]['style'].engine.size}}L {{
                            cars[id]['style'].engine.cylinder }} Cylinder
                        </li>
                    </ul>
                </md-card-content>
                <md-card-subtitle>Starting MSRP: {{cars[id]['style']?.price.baseMSRP }}
                </md-card-subtitle>
                <md-card-subtitle *ngIf="cars[id]['lease']?.leaseStart  !== null">Starting Monthly Lease: {{
                    cars[id]['lease']?.leaseStart }}
                </md-card-subtitle>
                <md-card-subtitle *ngIf="cars[id]['lease']?.onePayStart !== null">Starting One Pay Lease: {{cars[id]['lease']?.onePayStart }}
                </md-card-subtitle>
            </md-card>
</ng-container>

Which renders the following output:

I would like the template to sort by price value from object[key].style.price.baseMSRP

Answer 1

A pipe that creates an array out of this object and sorts it would look like this.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'sortObject'
})
export class SortObjectPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return Object
      .keys(value)
      .map(key => ({ key, value: value[key] }))
      .sort((a, b) => a.key.localeCompare(b.key));
  }

}

If you use the angular cli you can create one by using ng generate pipe <name> it will take care it is also added in all the proper places so it wired correctly.

You can read more about pipes in the angular 2 documentation here.

Answer 2

only Arrays can ensure sorting order.

function sort(data) {

  return Object
    .keys(data)
    .map(key => ({key, value: data[key]}))
    .sort((a, b) => a.key.localeCompare(b.key) /* your way */)
  ;
}

var data = {
  "200737212": {
    "style": {
      "make": {
        "id": 200001510,
        "name": "Jeep",
        "niceName": "jeep"
      },
      "model": {
        "id": "Jeep_Cherokee",
        "name": "Cherokee",
        "niceName": "cherokee"
      },
      "price": {
        "deliveryCharges": 995,
        "baseInvoice": 23360,
        "baseMSRP": 23495
      },
      "id": 200737212,
      "name": "Sport 4dr SUV (2.4L 4cyl 9A)",
      "trim": "Sport"
    },
    "config": {
      "id": 200737212,
      "includedItems": [],
      "furtherRemovals": []
    },
    "lease": {
      "leaseStart": 200,
      "onePayStart": 150
    }
  },
  "200737213": {
    "style": {
      "make": {
        "id": 200001510,
        "name": "Jeep",
        "niceName": "jeep"
      },
      "model": {
        "id": "Jeep_Cherokee",
        "name": "Cherokee",
        "niceName": "cherokee"
      },
      "price": {
        "deliveryCharges": 995,
        "baseInvoice": 24083,
        "baseMSRP": 24290
      },
      "id": 200737213,
      "name": "Altitude 4dr SUV (2.4L 4cyl 9A)",
      "trim": "Altitude"
    },
    "config": {
      "id": 200737213,
      "includedItems": [],
      "furtherRemovals": []
    },
    "lease": {
      "leaseStart": 300,
      "onePayStart": 250
    }
  },
  "200737214": {
    "style": {
      "make": {
        "id": 200001510,
        "name": "Jeep",
        "niceName": "jeep"
      },
      "model": {
        "id": "Jeep_Cherokee",
        "name": "Cherokee",
        "niceName": "cherokee"
      },
      "price": {
        "deliveryCharges": 995,
        "baseInvoice": 24818,
        "baseMSRP": 25295
      },
      "id": 200737214,
      "name": "Latitude 4dr SUV (2.4L 4cyl 9A)",
      "trim": "Latitude"
    },
    "config": {
      "id": 200737214,
      "includedItems": [],
      "furtherRemovals": []
    },
    "lease": {
      "leaseStart": 400,
      "onePayStart": 350
    }
  },
  "200737215": {
    "style": {
      "make": {
        "id": 200001510,
        "name": "Jeep",
        "niceName": "jeep"
      },
      "model": {
        "id": "Jeep_Cherokee",
        "name": "Cherokee",
        "niceName": "cherokee"
      },
      "price": {
        "deliveryCharges": 995,
        "baseInvoice": 28484,
        "baseMSRP": 29195
      },
      "id": 200737215,
      "name": "Limited 4dr SUV (2.4L 4cyl 9A)",
      "trim": "Limited"
    },
    "config": {
      "id": 200737215,
      "includedItems": [],
      "furtherRemovals": []
    },
    "lease": {
      "leaseStart": null,
      "onePayStart": null
    }
  }
};

console.log(sort(data));